Currently the table is too wide and causes the browser to add a horizontal scroll bar.
7 Answers
CSS:
table {
table-layout:fixed;
}
Update with CSS from the comments:
td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling (table will not go over the mobile screen anymore):
@media only screen and (max-width: 480px) {
/* horizontal scrollbar for tables if mobile screen */
.tablemobile {
overflow-x: auto;
display: block;
}
}
Sufficient enough.
-
3
-
3
-
5yeah but how can I keep the proportions of the column widths? with
fixed
, everything is just the same width..– phil294Mar 20, 2016 at 13:35 -
If the table content is too wide (as in this example), there's nothing you can do other than alter the content to make it possible for the browser to show it in a more narrow format. Contrary to the earlier answers, setting width to 100% will have absolutely no effect if the content is too wide (as that link, and this one, demonstrate). Browsers already try to keep tables within the left and right margins if they can, and only resort to a horizontal scrollbar if they can't.
Some ways you can alter content to make a table more narrow:
- Reduce the number of columns (perhaps breaking one megalithic table into multiple independent tables).
- If you're using CSS
white-space: nowrap
on any of the content (or the oldnowrap
attribute,
, anobr
element, etc.), see if you can live without them so the browser has the option of wrapping that content to keep the width down. - If you're using really wide margins, padding, borders, etc., try reducing their size (but I'm sure you thought of that).
If the table is too wide but you don't see a good reason for it (the content isn't that wide, etc.), you'll have to provide more information about how you're styling the table, the surrounding elements, etc. Again, by default the browser will avoid the scrollbar if it can.
table { width: 100%; }
Will not produce the exact result you are expecting, because of all the margins and paddings used in body. So IF scripts are OKAY, then use Jquery.
$("#tableid").width($(window).width());
If not, use this snippet
<style>
body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
<tr>
<td>Just a Test
</td>
</tr>
</table>
You will notice that the width is perfectly covering the page.
The main thing is too nullify the margin
and padding
as I have shown at the body, then you are set.
-
3Excuse me T.J. I think you have a lot of guts saying jQuery != JavaScript. Do you even know that jQuery is
"a JavaScript Library"
. Besides.. I have perfectly made myself clear by sayingIF scripts are OKAY
– StarxNov 21, 2010 at 9:37 -
3@Starx: You've misread my comment. My point isn't that jQuery doesn't use JavaScript, it's that it's not a valid assumption that anyone doing web development automatically uses jQuery. A lot of people don't, they either don't use a library or use Prototype, YUI, Closure, or any of several others. jQuery is a great JavaScript library, no question; it's just not useful to introduce it (or scripting) into a question about HTML/CSS. Nov 21, 2010 at 9:41
-
2@T.J. Crowder And? Have you found any solutions with HTML or CSS? If not, then the only way is to use JavaScript!– alexiaNov 21, 2010 at 9:43
-
@Nyuszika7H: What makes you think there's no HTML/CSS solution to the OP's problem? Nov 21, 2010 at 9:45
-
@Nyuszika7H, actually I have posted a snippet which may act as a solution for this.. but it depends upon other nesting elements that comes after it, whether a table's width to come in 100%, but It's just about correctly using margins and padding.– StarxNov 21, 2010 at 9:46
Instead of using the % unit – the width/height of another element – you should use vh
and vw
.
Your code would be:
your table {
width: 100vw;
height: 100vh;
}
But, if the document is smaller than 100vh
or 100vw
, then you need to set the size to the document's size.
(table).style.width = window.innerWidth;
(table).style.height = window.innerHeight;
Set font-size
in viewport-width-related units, e.g.:
table { font-size: 0.9vw; }
This will make font unreadable when page is too narrow, but sometimes this is acceptable.
Put the table in a container element that has
overflow:scroll; max-width:95vw;
or make the table fit to the screen and overflow:scroll all table cells.
There is already a good solution to the problem you are having. Everyone has been forgetting the CSS property font-size
: the last but not least solution. One can decrease the font size by 2 to 3 pixels. It may still be visible to the user and for somewhat you can decrease the width of the table. This worked for me. My table has 5 columns with 4 showing perfectly, but the fifth column went out of the viewport. To fix the problem, I decreased the font size and all five columns were fitted onto the screen.
table th td {
font-size: 14px;
}
For your information, if your table has too many columns and you are not able to decrease, then make the font size small. It will get rid of the horizontal scroll. There are two advantages: your style for mobile web will remain the same (good without horizontal scroll) and when user sees small sizes, most users will zoom into the table to their comfort level.
width
attribute (jsbin.com/emivi4/2).