Question

我正在制作一张应该在42英寸电视屏幕上观看的HTML桌子。在我的电脑屏幕上，它会从一侧到另一侧填满整个屏幕，但是当我将它连接到我的46英寸电视屏幕时HDMI线，屏幕上的表格没有填满屏幕，它更小，集中在屏幕中间并与背景颜色包围。我认为这是CSS问题。如何使表格填满整个屏幕，就像在我的电脑上一样？

请附上我的笔记本电脑屏幕截图： enter image description here

还有我的电视屏幕截图： enter image description here

在下面找到php表的副本：

<!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>

影响表格的CSS文件：

@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 */

期待你的回复。

Answer 1

这不是因为width:1300px;中的.wrapper吗？

编辑：

抱歉，我发现你没有在你的HTML中使用它（除非那里缺少某些东西）。

Answer 2

我会创建一个新类

.full-width {
    width:auto
}

并将其分配给您的HTML

<div class="wrapper full-width">

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

2 个答案:

编辑：