个人中心
gpt4 book ai didi

php - 当连接到我的 42"屏幕时，为什么我的 HTML 表格没有填满整个屏幕？

转载 作者：太空宇宙 更新时间：2023-11-03 20:46:39 27 4
gpt4 key购买 nike

我正在处理一个应该在 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 */

期待您的回复。

最佳答案

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

编辑:

抱歉，我看到您没有在 HTML 中使用它(除非那里缺少某些东西)。

关于php - 当连接到我的 42"屏幕时，为什么我的 HTML 表格没有填满整个屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20295708/

27 4 0
文章推荐： c# - 从 C# Windows 窗体向我的域中的客户端发送消息框
文章推荐： python - 如何通过链接抓取我需要的信息
文章推荐： python - 我正在设置 python 类，但它打印
文章推荐： javascript - 在 div 上添加 css 类
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com