Databases
StackOverflow2013
Postsdbo
POHow to adjust table size to correspond to the media screen size?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to adjust table size to correspond to the media screen size?
    text
    copied!<p>I'm having difficulties adjusting my tables to fit media screen sizes. The layout as it is now adjusts its content via media queries. In effect, there is no need for a scroll bar. </p> <p>Here's some code...</p> <p>(1) The HTML:</p> <pre><code>&lt;div id="results"&gt; &lt;/div&gt; </code></pre> <p>Ya, it's really simple. This tag actually resides in a few other divs that hold content. This particular div holds content that is sent from the server when a request is made. It responds properly when plain text is the content, but tables cause an issue.</p> <p>Here's my CSS code...</p> <p>(1) The CSS for <code>#results</code></p> <pre><code>div#results { width: 90%; margin: 0 auto; margin-top: 30px; } </code></pre> <p>(2) The CSS for tables:</p> <pre><code>table { font-family: 'PT Sans', Arial, sans-serif; color: #666; font-size: 12px; text-shadow: 1px 1px 0px #fff; background: #eaebec; margin: 20px; border: #ccc 1px solid; width: 80%; margin: 0 auto; } table th { padding: 21px 25px 22px 25px; border-top: 1px solid #fafafa; border-bottom: 1px solid #e0e0e0; background: #ededed; } table th:first-child { text-align: left; padding-left:20px; } table tr { text-align: center; padding-left: 20px; } table td:first-child { text-align: left; padding-left: 20px; border-left: 0px; } table td { padding:8px; border-top: 1px solid #ffffff; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; } table tr:hover td { background: #f2f2f2; } </code></pre> <p>The table remains the same size regardless of media screen size. The CSS probably makes that obvious. However, what can be done in this case? If I "squish" the table, the content will be illegible. For instance, if I want to pull up a table on a smartphone, how can I modify the table so that it is usable? Right now I have 5 columns. Is there a way to possible start a new row, say after two or three columns, in order that the content doesn't have to be compressed?</p> <p>That's the basic idea; I hope that the crux of what I am saying is clear. Any input is appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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