Databases
StackOverflow2013
Postsdbo
POWhy doesn't my HTML table fill up the entire screen when connected to my 42" screen?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy doesn't my HTML table fill up the entire screen when connected to my 42" screen?
    primarykey
    data
    text
    <p>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?</p> <p>Please find attached my laptop screen shot: <img src="https://i.stack.imgur.com/J5Nxx.png" alt="enter image description here"></p> <p>and also my TV screen shot: <img src="https://i.stack.imgur.com/NKEPw.png" alt="enter image description here"></p> <p>Find below a copy of the php table:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Create a Parralax Website using Stellar.js&lt;/title&gt; &lt;!-- &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"&gt; --&gt; &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/js.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.stellar.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/waypoints.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt; &lt;script&gt; // 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) }) &lt;/script&gt; &lt;?php include ("class/flightScheduleClass.php"); $obj = new FSchedule; ?&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- &lt;img class="envatologo" src="images/envatologo.png"&gt; --&gt; &lt;div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5"&gt; &lt;div class="wrapper"&gt; &lt;!-- ###################################################### --&gt; &lt;!-- ############### Arrivals ############################# --&gt; &lt;img src='../FlightShedule2/images/arrivals.png' alt='Arrivals' style='float:left' align='middle' width='105' height='38'&gt; &lt;?php $obj-&gt;pushAWeekAHead(); $obj-&gt;getArrivals(); ?&gt; &lt;/div&gt; &lt;a class="button" id="one" data-slide="2" title=""&gt;&lt;/a&gt; &lt;/div&gt;&lt;!--End Slide 1--&gt; &lt;div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5"&gt; &lt;!-- ###################################################### --&gt; &lt;!-- ############### Depatures ############################# --&gt; &lt;img src='../FlightShedule2/images/depature.png' alt='Arrivals' style='float:left' align='middle' width='145' height='38'&gt; &lt;div class="wrapper"&gt; &lt;?php echo $obj-&gt;getDepatureShedules(); ?&gt; &lt;/div&gt; &lt;!-- &lt;span class="slideno"&gt;Slide 2&lt;/span&gt; --&gt; &lt;a class="button" id="two" data-slide="3" title=""&gt;&lt;/a&gt; &lt;/div&gt;&lt;!--End Slide 2--&gt; &lt;div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5"&gt; &lt;div class="wrapper"&gt; &lt;!-- ###################################################### --&gt; &lt;!-- ############### Arrivals ############################# --&gt; &lt;img src='../FlightShedule2/images/arrivals.png' alt='Arrivals' style='float:left' align='middle' width='105' height='38'&gt; &lt;?php // $obj-&gt;getShedules(); $obj-&gt;getArrivals(); ?&gt; &lt;/div&gt; &lt;!-- &lt;span class="slideno"&gt;Slide 3&lt;/span&gt; --&gt; &lt;a class="button" id="three" data-slide="4" title=""&gt;&lt;/a&gt; &lt;/div&gt;&lt;!--End Slide 3--&gt; &lt;div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0"&gt; &lt;!-- &lt;span class="slideno"&gt;Slide 4&lt;/span&gt; --&gt; &lt;a class="button" id="four" data-slide="1" title=""&gt;&lt;/a&gt; &lt;?php include 'adRotator.html'; ?&gt; &lt;!-- &lt;span class="parallaxbg"&gt;Your Advertisment here!&lt;/span&gt; --&gt; &lt;/div&gt;&lt;!--End Slide 4--&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And the CSS file affecting the table:</p> <pre><code>@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 */ </code></pre> <p>Looking forward to you reply.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSirBT
    1. USSirBT
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COtry adding margin:0 and padding:0 http://stackoverflow.com/questions/539309/html-table-span-entire-width
      singulars
      1. POWhy doesn't my HTML table fill up the entire screen when connected to my 42" screen?
      1. USmr.musicman
    2. COThe thing that matters is not the physical size of the screen, but its resolution. Which resolution are you using on each screen?
      singulars
      1. POWhy doesn't my HTML table fill up the entire screen when connected to my 42" screen?
      1. USCarlo Cannas
    3. CO@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.
      singulars
      1. POWhy doesn't my HTML table fill up the entire screen when connected to my 42" screen?
      1. USSirBT
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload