Why doesn't my HTML table fill up the entire screen when connected to my 42" screen?

Question

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.

try adding margin:0 and padding:0 http://stackoverflow.com/questions/539309/html-table-span-entire-width — stevenspiel, Nov 30 '13 at 02:10
The thing that matters is not the physical size of the screen, but its resolution. Which resolution are you using on each screen? — Carlo Cannas, Nov 30 '13 at 02:11
@CarloCannas To answer you question, the resolution on my laptop is: 1366 X 768 (16:9) and the 1920 X 1080 (16:9) on my Flat screen. I doubt that it has to do with the resulution because other pages display just fine, as in they cover the entire screen. — SirBT, Nov 30 '13 at 03:01
Besides that, there is code missing. Could you please provide all the code in *style.css*? Also a Fiddle could help. — Carlo Cannas, Nov 30 '13 at 03:06
@mr.musicman I tried your solution but it didnt work. I looked at it in firebug and noticed this: ** body { display: block; margin: 8px; }** How do I change this? — SirBT, Nov 30 '13 at 03:17
@CarloCannas Just included the entire CSS file. I hope this will help. — SirBT, Nov 30 '13 at 03:36
@SirBT I just made a quick Fiddle, but i cannot reproduce the problem: http://jsfiddle.net/WeQDK/. I only changed a bit the HTML (there were some missing closing tags). — Carlo Cannas, Nov 30 '13 at 03:38
@mr.musicman That would actually make alot of sense... It stays the same. It doenst resize at all. :-( — SirBT, Nov 30 '13 at 03:40
I actually deleted my comment because I saw there was no div surrounding the table in your html. Wish I could help more... — stevenspiel, Nov 30 '13 at 03:42
@mr.musicman: after the table there is a closing div tag. I think SirBT left out the opening div tag which could be #wrapper. In your code do you have the div wrapper? If not remove the last and see — Alexander Kimaru, Nov 30 '13 at 03:51
@mr.musicman Kindly have another look at it. I edited my post and pasted the entire file as it is. You will notice that The file is actually a PHP file, but that shouldnt matter. The original post excluded alot of code that I think were useful in working towards a resolution. — SirBT, Nov 30 '13 at 03:51
I would go with Ian's suggested answer. Comment out or delete `width:1300px;` from `.wrapper` in your css file. See if that fixes it. — stevenspiel, Nov 30 '13 at 03:56
Bebas Regular is possibly the most boring font one could ever find in their entire life. — rappatic, Dec 01 '17 at 21:30

score 4 · Answer 1 · answered Nov 30 '13 at 03:38

4

Isn't that because of width:1300px; in your .wrapper?

Edit:

Sorry, I see you don't use it in your HTML (unless something is missing there).

answered Nov 30 '13 at 03:38

Ian Bytchek

8,804
6
46
72

1

It must be that, the table in the screenshot is exactly 1300px wide. – Carlo Cannas Nov 30 '13 at 03:43
Eagle eye power activated! :) – Ian Bytchek Nov 30 '13 at 03:45
@IanBytchek Thank you for pointing that out. I commented it out and it automatically adjusted. Thanks alot – SirBT Nov 30 '13 at 03:57

score 1 · Accepted Answer · answered Nov 30 '13 at 04:03

1

I would create a new class

.full-width {
    width:auto
}

and assign it to your HTML

<div class="wrapper full-width">

answered Nov 30 '13 at 04:03

stevenspiel

5,775
13
60
89

I would like to add some padding to my page so that the images are shifted a few pixels from the left side of the screen inwards, how do I do this? I cant figure out where to put this: padding-left:30; – SirBT Nov 30 '13 at 04:18
Would you like the padding along the entire left-hand side, or for each of the individual airline pictures? (that is, if you haven't gotten it yet). I'm happy to help. – stevenspiel Nov 30 '13 at 21:10

Why doesn't my HTML table fill up the entire screen when connected to my 42" screen?

2 Answers2

Edit: