Почему моя HTML-таблица не заполняет весь экран при подключении к моему 42-дюймовому экрану?

Question

Почему моя HTML-таблица не заполняет весь экран при подключении к моему 42-дюймовому экрану?

0

Я работаю над таблицей HTML, которая должна быть просмотрена на 42-дюймовых экранах телевизора. На экране моего компьютера он заполняет весь экран из стороны в сторону, однако, когда я подключаю его к 46-дюймовому экрану телевизора через кабель HDMI, таблица на экране не заполняет экран, он меньше и централизован в середине экрана и окружен цветом фона. Я предполагаю, что это проблема CSS. Как заставить таблицу заполнить весь экран, как на моем компьютере?

Пожалуйста, найдите прилагаемый снимок экрана для ноутбука:

а также мой снимок экрана телевизора:

Найдите ниже копию таблицы 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 */

С нетерпением ждем ответа.

SirBT 30 нояб. 2013, в 03:42

Источник

2

попробуйте добавить поле 0 и отступ: 0 stackoverflow.com/questions/539309/html-table-span-entire-width
mr.musicman 30 нояб. 2013, в 02:10
0

Важно не физический размер экрана, а его разрешение. Какое разрешение вы используете на каждом экране?
Carlo Cannas 30 нояб. 2013, в 02:11
0

@CarloCannas Чтобы ответить на ваш вопрос, разрешение на моем ноутбуке составляет: 1366 X 768 (16: 9) и 1920 X 1080 (16: 9) на моем плоском экране. Я сомневаюсь, что это связано с результатом, потому что другие страницы отображаются очень хорошо, так как они покрывают весь экран.
SirBT 30 нояб. 2013, в 03:01
0

приложить скриншот
Alexander Kimaru 30 нояб. 2013, в 03:06
0

Кроме того, отсутствует код. Не могли бы вы предоставить весь код в style.css ? Также может помочь скрипка.
Carlo Cannas 30 нояб. 2013, в 03:06
0

@ mr.musicman Я попробовал ваше решение, но оно не сработало. Я посмотрел на него в firebug и заметил это: ** body {display: block; поле: 8px; } ** Как мне это изменить?
SirBT 30 нояб. 2013, в 03:17
0

@AlexanderKimaru Только что добавили скриншоты, чтобы уточнить
SirBT 30 нояб. 2013, в 03:28
0

Если вы хотите, чтобы он занимал весь экран, сделайте высоту: 100%
MultiplyByZer0 30 нояб. 2013, в 03:34
0

@CarloCannas Просто включил весь файл CSS. Я надеюсь, это поможет.
SirBT 30 нояб. 2013, в 03:36
0

@SirBT Я только что сделал быструю скрипку, но не могу воспроизвести проблему: jsfiddle.net/WeQDK . Я только немного изменил HTML (были некоторые отсутствующие закрывающие теги).
Carlo Cannas 30 нояб. 2013, в 03:38
0

@ mr.musicman Это на самом деле имеет большой смысл ... Остаётся прежним. Это вообще не меняет размер. :-(
SirBT 30 нояб. 2013, в 03:40
1

Я фактически удалил свой комментарий, потому что я увидел, что в вашем html нет таблицы div вокруг таблицы. Хотел бы я помочь больше ...
mr.musicman 30 нояб. 2013, в 03:42
0

@ mr.musicman: после таблицы есть закрывающий тег div. Я думаю, что SirBT пропустил открывающий тег div, который может быть #wrapper. В вашем коде у вас есть div div? Если нет, удалите последний </ div> и посмотрите
Alexander Kimaru 30 нояб. 2013, в 03:51
0

@ mr.musicman Пожалуйста, взгляните еще раз. Я отредактировал свой пост и вставил весь файл как есть. Вы заметите, что файл на самом деле является файлом PHP, но это не должно иметь значения. Оригинальный пост исключил много кода, который, я думаю, был полезен при разработке резолюции.
SirBT 30 нояб. 2013, в 03:51
0

Я бы пошел с предложенным Яном ответом. Закомментируйте или удалите width:1300px; из .wrapper в вашем файле CSS. Посмотри, исправит ли это.
mr.musicman 30 нояб. 2013, в 03:56
0

Bebas Regular, возможно, самый скучный шрифт, который когда-либо можно было найти за всю их жизнь.
rappatic 01 дек. 2017, в 21:30

Показать ещё 14 комментариев

Теги:

php

html

css

2 ответа

4

Разве это не из-за width:1300px; в вашем .wrapper?

Редактировать:

Извините, я вижу, вы не используете его в своем HTML (если там что-то отсутствует).

Ian Bytchek 30 нояб. 2013, в 00:54

1

Должно быть, таблица на скриншоте имеет ширину ровно 1300 пикселей.
Carlo Cannas 30 нояб. 2013, в 03:43
0

Сила орлиного глаза активирована! :)
Ian Bytchek 30 нояб. 2013, в 03:45
0

@IanBytchek Спасибо, что указали на это. Я закомментировал это, и это автоматически настроено. Большое спасибо
SirBT 30 нояб. 2013, в 03:57

Показать ещё 1 комментарий

Ещё вопросы

попробуйте добавить поле 0 и отступ: 0 stackoverflow.com/questions/539309/html-table-span-entire-width
Важно не физический размер экрана, а его разрешение. Какое разрешение вы используете на каждом экране?
@CarloCannas Чтобы ответить на ваш вопрос, разрешение на моем ноутбуке составляет: 1366 X 768 (16: 9) и 1920 X 1080 (16: 9) на моем плоском экране. Я сомневаюсь, что это связано с результатом, потому что другие страницы отображаются очень хорошо, так как они покрывают весь экран.
Кроме того, отсутствует код. Не могли бы вы предоставить весь код в style.css ? Также может помочь скрипка.
@ mr.musicman Я попробовал ваше решение, но оно не сработало. Я посмотрел на него в firebug и заметил это: ** body {display: block; поле: 8px; } ** Как мне это изменить?
@AlexanderKimaru Только что добавили скриншоты, чтобы уточнить
Если вы хотите, чтобы он занимал весь экран, сделайте высоту: 100%
@CarloCannas Просто включил весь файл CSS. Я надеюсь, это поможет.
@SirBT Я только что сделал быструю скрипку, но не могу воспроизвести проблему: jsfiddle.net/WeQDK . Я только немного изменил HTML (были некоторые отсутствующие закрывающие теги).
@ mr.musicman Это на самом деле имеет большой смысл ... Остаётся прежним. Это вообще не меняет размер. :-(
Я фактически удалил свой комментарий, потому что я увидел, что в вашем html нет таблицы div вокруг таблицы. Хотел бы я помочь больше ...
@ mr.musicman: после таблицы есть закрывающий тег div. Я думаю, что SirBT пропустил открывающий тег div, который может быть #wrapper. В вашем коде у вас есть div div? Если нет, удалите последний </ div> и посмотрите
@ mr.musicman Пожалуйста, взгляните еще раз. Я отредактировал свой пост и вставил весь файл как есть. Вы заметите, что файл на самом деле является файлом PHP, но это не должно иметь значения. Оригинальный пост исключил много кода, который, я думаю, был полезен при разработке резолюции.
Я бы пошел с предложенным Яном ответом. Закомментируйте или удалите width:1300px; из .wrapper в вашем файле CSS. Посмотри, исправит ли это.
Bebas Regular, возможно, самый скучный шрифт, который когда-либо можно было найти за всю их жизнь.
Должно быть, таблица на скриншоте имеет ширину ровно 1300 пикселей.
Сила орлиного глаза активирована! :)
@IanBytchek Спасибо, что указали на это. Я закомментировал это, и это автоматически настроено. Большое спасибо

mr.musicman · Accepted Answer · 2013-11-30T01-55-00.000Z

1

Лучший ответ

Я бы создал новый класс

.full-width {
    width:auto
}

и назначить его вашему HTML

<div class="wrapper full-width">

mr.musicman 30 нояб. 2013, в 01:55

0

Я хотел бы добавить некоторые отступы на свою страницу, чтобы изображения смещались на несколько пикселей от левой стороны экрана внутрь, как мне это сделать? Я не могу понять, где поставить это: padding-left: 30;
SirBT 30 нояб. 2013, в 04:18
0

Желаете ли вы подкладку вдоль всей левой стороны или для каждой отдельной фотографии авиакомпании? (то есть, если вы еще не получили его). Я рад помочь.
mr.musicman 30 нояб. 2013, в 21:10
0

спасибо за ваше время, но я разобрался.
SirBT 02 дек. 2013, в 05:03
0

Отлично. Хорошая работа и удачи с остальными!
mr.musicman 02 дек. 2013, в 12:26

Показать ещё 2 комментария