doujiurong7210 2013-11-30 02:08
浏览 34
已采纳

连接到我的42英寸屏幕时,为什么我的HTML表格不会填满整个屏幕?

I am working on a HTML table that is supposed to be viewed on 42" TV screens. On my computer screen it fills up the entire screen from side to side, however when I connect it to my 46" TV screen via an HDMI cable, the table in the screen doesn't fill up the screen, it is smaller and centralised in the middle of the screen and surrounded with the background colour. I assume this is CSS issue. How do I make the table fill up the entire screen, just like it does on my computer?

Please find attached my laptop screen shot: enter image description here

and also my TV screen shot: enter image description here

Find below a copy of the php table:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a Parralax Website using Stellar.js</title>

<!-- <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script>
// After 9 seconds click on
$(document).ready(function()
{
        setTimeout(function(){ $("#one")[0].click()},8000);
        setTimeout(function(){ $("#two")[0].click()},16000);                
        setTimeout(function(){ $("#three")[0].click()},24000);      
        setTimeout(function(){ $("#four")[0].click()},32000);

        //setTimeout(function(){ $("#one")[0].click()},32000);      

        setTimeout(function(){window.location.reload();}, 40000)

})
</script>

<?php include ("class/flightScheduleClass.php");

$obj = new FSchedule;  

?>

</head>

<body>

<!--    <img class="envatologo" src="images/envatologo.png"> -->


    <div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">

        <div class="wrapper">

<!-- ###################################################### -->
<!-- ############### Arrivals ############################# -->
<img src='../FlightShedule2/images/arrivals.png' alt='Arrivals' style='float:left' align='middle' width='105' height='38'>
<?php 
$obj->pushAWeekAHead();  
$obj->getArrivals(); 
?>
        </div>      

        <a class="button" id="one" data-slide="2" title=""></a>

    </div><!--End Slide 1-->



    <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<!-- ###################################################### -->
<!-- ############### Depatures ############################# -->
<img src='../FlightShedule2/images/depature.png' alt='Arrivals' style='float:left' align='middle' width='145' height='38'>

        <div class="wrapper">

        <?php
        echo $obj->getDepatureShedules();

        ?>

        </div>

        <!-- <span class="slideno">Slide 2</span> -->
        <a class="button" id="two" data-slide="3" title=""></a>



    </div><!--End Slide 2-->





    <div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
        <div class="wrapper">

<!-- ###################################################### -->
<!-- ############### Arrivals ############################# -->
<img src='../FlightShedule2/images/arrivals.png' alt='Arrivals' style='float:left' align='middle' width='105' height='38'>

        <?php 
//      $obj->getShedules(); 
        $obj->getArrivals(); 
        ?>
        </div>

        <!-- <span class="slideno">Slide 3</span> -->
        <a class="button" id="three" data-slide="4" title=""></a>

    </div><!--End Slide 3-->






    <div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">


        <!-- <span class="slideno">Slide 4</span> -->
        <a class="button" id="four" data-slide="1" title=""></a>

    <?php include 'adRotator.html'; ?>
        <!-- <span class="parallaxbg">Your Advertisment here!</span> -->

    </div><!--End Slide 4-->



</body>
</html>

And the CSS file affecting the table:

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'BebasRegular';
    src: url('font/BEBAS___-webfont.eot');
    src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/BEBAS___-webfont.woff') format('woff'),
         url('font/BEBAS___-webfont.ttf') format('truetype'),
         url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
html,body{
 font-family: 'BebasRegular';
    width:100%;
    height:100%;

    margin:0;
     padding:0;
}

.navigation{
    position:fixed;
    z-index:1;
    top:20px;
}
.navigation li{
    color:#333333;
    display:block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:bold;
    -webkit-transition: all .2s ease-in-out;
    border-bottom:1px solid black;
    text-align:left;
    width:53px;
}
.navigation li:hover,.active{
    font-size:25px;
    cursor:pointer;
    width:100px!important;
}
.envatologo{
position:fixed;
top:50%;
left:50%;
width:446px;
margin-top:-41px;
margin-left:-223px;
z-index:1;
}
.slide{
    background-attachment: fixed;
    width:100%;
    height:100%;
    position: relative;
    box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
    width:1300px;
    height:200px;
    margin:0 auto;
    position:relative;
}
.slideno{
    position:absolute;
    bottom:0px;
    left:0px;
    font-size:100px;
    font-weight:bold;
    color:rgba(255,255,255,0.3);
}
.button{
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    bottom:0px;
    left:50%;
    background-color:#333333;
    background-image:url(../images/arrow.png);
}

.button2{
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    bottom:0px;
    left:50%;
    background-color:#333333;
    background-image:url(../images/arrow.png);
}

.button3{
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    bottom:0px;
    left:50%;
    background-color:#333333;
    background-image:url(../images/arrow.png);
}


.button:hover{
    background-color:#494949;
    cursor:pointer;
}

/******************************
 SLIDE 1 
*******************************/
#slide1{
    background-color:#080908;

}
/******************************
 SLIDE 2 
*******************************/
#slide2{
    background-color:#080908;

}
#slide2 img:first-child{
padding-left:30px;
}
#slide2 img:nth-child(2){
    position:absolute;
    top:300px;
    left:100px;
}
#slide2 img:nth-child(3){
    position:absolute;
    top:600px;
    left:300px;
}
#slide2 img:nth-child(4){
    position:absolute;
    top:400px;
    left:300px;
}
#slide2 img:nth-child(5){
    position:absolute;
    top:600px;
    right:300px;
}
#slide2 img:nth-child(6){
    position:absolute;
    top:600px;
    right:300px;
}
#slide2 img:nth-child(7){
    position:absolute;
    top:400px;
    right:100px;
}
#slide2 img:nth-child(8){
    position:absolute;
    top:100px;
    right:300px;
}
/******************************
 SLIDE 3 
*******************************/
#slide3{
    background-color:#080908;
}
#slide3 img:first-child{
padding-left:5px;
}
#slide3 img:nth-child(2){
    position:absolute;
    top:100px;
    left:100px;
}
#slide3 img:nth-child(3){
    position:absolute;
    top:150px;
    left:300px;
}
#slide3 img:nth-child(4){
    position:absolute;
    top:450px;
    left:300px;
}
#slide3 img:nth-child(5){
    position:absolute;
    top:200px;
    right:300px;
}
#slide3 img:nth-child(6){
    position:absolute;
    top:100px;
    right:300px;
}
/******************************
 SLIDE 4 
*******************************/

#slide4{
    background-image:url();
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#slide4 .parallaxbg{
    position:absolute;
    right:40px;
    top:40px;
    font-size:28px;
    color:rgba(51,51,51,0.3);
}

/*********** DATABASE STUFF BELOW ADDED BY VINCENT *******************/

#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
color:#ffffff;
border-collapse:collapse;
}
#customers td, #customers th 
{
font-size:1.0em;
border:1px solid #060900;
padding:3px 7px 2px 7px;
background-color:#000000;
}
#customers th 
{
font-size:1.5em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#050700;
color:#ffff00;
border-bottom: solid 0.15em red;
}
#customers tr.alt td 
{
color:#FAF7F7;
background-color:#0B0B61;
}

/*********** Ad Rotator STUFF BELOW ADDED BY VINCENT *******************/

#slideshow-container 
{ 
height:90px; 
position:relative; 
}

#slideshow-container img 
{ 
position:absolute; 
left:0; 
top:0; 
width:100%; 
height:100%; 
}
#slideshow      
{ position:absolute; 
left:0; 
top:0; 
width:100%; 
height:100%; 
list-style:none;
}
#slideshow img  
{ 
width:120px; 
height:90px; 
background-repeat:none; 
background-position:top left; 
position:absolute; 
left:0; 
top:0;
}
#slideshow      
{
 position:absolute; 
left:0; 
top:0; 
width:100%; 
height:100%; 
}

#slideshow img  
{ 
width:120px; 
height:90px; 
background-repeat:none; 
background-position:top left; 
position:absolute; 
left:0; 
top:0; 
} /* adjust this for your images */

Looking forward to you reply.

  • 写回答

2条回答 默认 最新

  • duanlangwen9597 2013-11-30 04:03
    关注

    I would create a new class

    .full-width {
        width:auto
    }
    

    and assign it to your HTML

    <div class="wrapper full-width">
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 怎么在stm32门禁成品上增加记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app