Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>What you are asking and what you want may be two different things. </p> <h2>Header Bar from Site Example</h2> <p>From what I can tell by the example site you posted a link for, the header does not actually change width at all, but a black background band is set behind the header to fill the space to the sides on a wide screen.</p> <p>This is actually done by having a structure like in <a href="http://jsfiddle.net/LaKgG/15/" rel="nofollow">this example</a>.</p> <pre><code>&lt;div class="outer"&gt; &lt;div class="inner"&gt; Some content. &lt;/div&gt; &lt;/div&gt; .outer { width: 100%; background-color: black; } .inner { width: 300px; /*some fixed or percentage width*/ margin: 0 auto; } </code></pre> <h2>Make Table 100% Width</h2> <p>Now, as far as actually making a <code>table</code> element always fill the screen, that is not too difficult.</p> <pre><code>table {width: 100%} </code></pre> <p>When the screen becomes very narrow, it does have a practical limit and forces a horizontal scroll bar depending on table content. Some media queries can alleviate this for modern browsers (IE9+). <a href="http://jsfiddle.net/LaKgG/11/" rel="nofollow">Play around with resizing this table</a> which has these media queries to help keep even small space filling just the full screen (but even that, as you see with the text size, has a practical limit to what one would really want to implement):</p> <pre><code>@media screen and (max-width: 400px) { table {font-size: 70%;} } @media screen and (max-width: 250px) { table {font-size: 50%;} } @media screen and (max-width: 150px) { table {font-size: 30%;} } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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