How can I make a table fill the whole screen?

Question

When I set the width of a table to 100% using in-line CSS, it fills the entire page, but when trying to set the table width to 100% inside a media query in the style.css file it doesn't fill the page. I am testing the website on a phone with a less than 600px width.

Works In-line. <table style="width: 100%">

Doesn't Work in style.css file. @media only screen and (max-width: 600px) {table {width: 100%;}}

How can I make it work in the style.css file?

Answer 1

You can achieve that by setting css on the table: table{min-width:100%}

Check this out:

https://jsfiddle.net/sa0Ldbe1/

Answer 2

@media only screen and (max-width: 600px) {table {width: 100%;}}

Will only work on devices less than 600px wide.

<table style="width: 100%">

Will work on any device size. Make sure the device you are using is smaller than 600px.

If you need it to work on devices larger than 600px wide, use table {width: 100%;} or @media only screen and (min-width: 600px) {table {width: 100%;}}

Answer 3

Good night xman, Avoid placing your CSS inline. It is good practice to place your styles in a CSS file.

Look:

 table { width: 50%; } td, th { border: 1px solid black; text-align: left; } @media (max-width: 600px){ table { width: 100%; } }

 <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

As long as the width was in the tag, your media querie would never work, because in CSS Specificity Hierarchy, inline styles will always be above the styles you put in your style.css.

More about: CSS Specificity Hierarchy