How can I make a CSS table fit the screen width?

Question

Currently the table is too wide and causes the browser to add a horizontal scroll bar.

Vane

@define a width for the table then you won't get horizontal bar. – Cheadle

@all: Okay, am I missing something? The OP says the table is "too wide and causes the browser to add a horizontal scroll bar." and there are three "use a width of 100%" answers. If the table is already too wide, that's not going to make any difference. It doesn't work with CSS (jsbin.com/emivi4) and it doesn't work with a width attribute (jsbin.com/emivi4/2). – Judaica

@T J Crowder; the horizontal bar might be because of an absolute width that is wider than the browser width; setting it to 100% instead will ensure it has the same width as the browser. Downvoting all answers does not go well with "am I missing something?" – Vickievicksburg

@TJ, he might have giving extra width than screen width, that shows the horizontal bar right...if you give 2000 px width for table .on a 1000px monitor , we may see horizontal scroll bark , – Cheadle

@TJ , why did you vote all of them down , they are right , if you 100%width you won't run into horizontal scroll bar. – Cheadle

@BeemerGuy: Did you, I don't know, look at the examples showing that it doesn't work? If it works, by all means show an example, I've been wrong before. I don't think I'm wrong about this, but then, it's when you don't think you're going to be wrong that you're most likely to get a reality slap. :-) – Judaica

@gov: A) Don't assume that if someone comments and someone downvotes that they are the same person (you are correct in this case, but will frequently be wrong). B) No, it doesn't work (again, did you even bother to check the links I provided?). If you think it works, by all means, show me, I've been wrong before. – Judaica

I don't know the user's screen width. – Vane

@David B: Indeed, you have to design for a reasonable size and then hope for the best. You could use JavaScript to actually find out how big the browser window is at runtime, but then you're adding scripting into the mix, and ideally you want to avoid using scripting for basic presentation. – Judaica

@TJ; you are correct. But if I were in your position and three people were wrong, I wouldn't handle it the way you did. – Vickievicksburg

See also this answer to a related question: https://mcmap.net/q/63702/-word-wrap-in-an-html-table – Chivalric

Answer 1

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 old nowrap attribute,  , a nobr 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.

Judaica

Answer 2

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.

Oshea

td { overflow: hidden; text-overflow: ellipsis; } – Pathy

+ td { word-wrap: break-word; } – Jaw

yeah but how can I keep the proportions of the column widths? with fixed, everything is just the same width.. – Emmyemmye

Thanks!! the 3rd one is nice! so that is really meant for mobile? – Plash

Answer 3

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 to nullify the margin and padding as I have shown at the body, then you are set.

Glorygloryofthesnow

Excuse 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 saying IF scripts are OKAY – Glorygloryofthesnow

@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. – Judaica

@T.J. Crowder And? Have you found any solutions with HTML or CSS? If not, then the only way is to use JavaScript! – Restore

@Nyuszika7H: What makes you think there's no HTML/CSS solution to the OP's problem? – Judaica

@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. – Glorygloryofthesnow

@Nyuszika7H, I tested it on my PC, I am not sure about jsFiddle. I will check it out. – Glorygloryofthesnow

@Nyuszika7H, it is working see here jsfiddle.net/jaAHp. Tested Safari, FF3 – Glorygloryofthesnow

@Glorygloryofthesnow - that's not a very valid test, since you didn't provide enough content to exhibit the issue, for example: jsfiddle.net/nick_craver/jaAHp/1 – Unisexual

@Nick, you have used excessive no of columns, so even using the script or directly defining width is also not going to solve this issue then. – Glorygloryofthesnow

@Glorygloryofthesnow - I don't disagree at all, but content spanning too far seems to be the OP's issue, my point was that your test case isn't representative of the actual issue...do you're not testing a solution really, seeing as it never exhibited the problem. Look at your test case: jsfiddle.net/nick_craver/jaAHp/3 ...it doesn't have any of the scrolling issues the question outlines, you have to reproduce the problem, then test a solution. – Unisexual

Well Nick, I can't imagine a issue on myself, since OP has decided to left that part out conveniently. – Glorygloryofthesnow

@lopezdp, Can be either on head or body as long as it is inside script tags it is be read. – Glorygloryofthesnow

Answer 4

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.

Sibelius

Answer 5

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.

Bournemouth

Answer 6

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;

Vicarial

Answer 7

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.

Gracye

Answer 8

You need to add in the style of the table: width: auto;

Invocate

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bawdy

Answer 9

Here's what I found to work best:

table {
    table-layout: fixed;
    width: 100%;
}

td, th {
    text-wrap: wrap;
}

You may also need:

td {
    word-wrap: break-word;
}

I didn't add this to the th.

You could also add vertical-align: middle; to the td, th.

Anatolian