Force table column widths to always be fixed regardless of contents

Question

I have an html table with table-layout: fixed and a td with a set width. The column still expands to hold the contents of text that doesn't contain a space. Is there a way to fix this other than wrapping the contents of each td in a div?

Example: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

In the example, you can see that the column with AAAAAAAAAAAA... expands despite being explicitly set to 50px wide.

Duplicate of http://stackoverflow.com/q/4457506/1190388 – hjpotter92 Mar 27 '13 at 20:22 — hjpotter92, Mar 27 '13 at 20:22

score 218 · Accepted Answer · answered Mar 27 '13 at 20:26

218

Specify the width of the table:

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

See jsFiddle

answered Mar 27 '13 at 20:26

Arie Xiao

13,909
3
31
30

2

It trims the content – Vikash Apr 04 '16 at 02:17
13

Amazing! it also works perfect with `table-layout: fixed; width: 100%;`. – Lucas Reppe Welander Apr 06 '17 at 09:30
This works, but why is it necessary? Why does `table-layout: fixed;` allow content to override the fixed width of each column in the first place? – Patrick Szalapski Aug 24 '21 at 19:53
If you don't want the content to be trimmed, at least you can make a scrollable cell: https://stackoverflow.com/a/11810223/4513925 – Yahya Jun 09 '23 at 04:01

Drew Anderson · Answer 2 · 2013-03-27T20:29:25.660

25

Try looking into the following CSS:

word-wrap:break-word;

Web browsers should not break-up "words" by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.

You would need to set a width on the overall table then a width on the columns. "width:100%;" should also be OK depending on your requirements.

Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.

edited Mar 27 '13 at 20:29

answered Mar 27 '13 at 20:22

Drew Anderson

534
3
14

3

This, combined with Arie Shaw's answer, got me the behavior I was looking for. The column is always the same width regardless of text, and it wraps the text even if there are no spaces. – datadamnation Mar 27 '13 at 21:00
I'm looking for something like this, however this seems not to work if table is not set to table-layout: fixed. However table-layout fixed is not css stylable if the table head th has a colspan. How you make word-wrap working in a table? http://stackoverflow.com/questions/42371945/set-forced-width-with-css-on-td-which-is-under-th-with-colspan-without-using – Manuel Feb 21 '17 at 15:57

score 18 · Answer 3 · edited Mar 22 '16 at 10:46

18

Make the table rock solid BEFORE the css. Figure your width of the table, then use a 'controlling' row whereby each td has an explicit width, all of which add up to the width in the table tag.

Having to do hundreds html emails to work everywhere, using the correct HTML first, then styling w/css will work around many issues in all IE's, webkit's and mozillas.

so:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Will keep a table at 300px wide. Watch images that are larger than the width by extremes

edited Mar 22 '16 at 10:46

Obsidian Phoenix

4,083
1
22
60

answered Mar 27 '13 at 20:20

kelly johnson

1,596
3
16
26

3

w3school says not supported in html5 – v.oddou Dec 24 '19 at 09:54
1

The `width` attribute is deprecated, you either use the CSS `width` property or, the recommended HTML 5 way to set column width, use `` and `` elements right after the `` tag and before any ``, `` or `` elements.
– S. Esteves May 29 '20 at 02:46

score 10 · Answer 4 · answered Mar 27 '13 at 20:26

10

You can add a div to the td, then style that. It should work as you expected.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Then the css.

td div { width: 50px; overflow: hidden; }

answered Mar 27 '13 at 20:26

John Fisher

22,355
2
39
64

score 4 · Answer 5 · answered Feb 15 '19 at 14:45

You can also use percentages, and/or specify in the column headers:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

The bonus with percentages is lower code maintenance: you can change your table width without having to re-specify the column widths.

Caveat: It is my understanding that table width specified in pixels isn't supported in HTML 5; you need to use CSS instead.

Stefan Brendle · Answer 6 · 2013-03-27T20:37:44.083

You can also work with "overflow: hidden" or "overflow-x: hidden" (for just the width). This requires a defined width (and/or height?) and maybe a "display: block" as well.

"Overflow:Hidden" hides the whole content, which does not fit into the defined box.

Example:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Shame on me, I've seen, you already use "overflow". I guess it doesn't work, because you don't set "display: block" to your element ...

score 0 · Answer 7 · edited Jun 26 '21 at 14:22

0

I would try setting it to:

max-width: 50px;

edited Jun 26 '21 at 14:22

linktoahref

7,812
3
29
51

answered Mar 27 '13 at 20:20

Alex

105
3
10

and width:50px; if you really want to be fixed width. – Adrian P. Jan 15 '18 at 21:26

score -3 · Answer 8 · edited Sep 23 '21 at 13:03

-3

This works for me

td::after { 
  content: ''; 
  display: block; 
  width: 30px;
}

edited Sep 23 '21 at 13:03

AmerllicA

29,059
15
130
154

answered May 15 '19 at 12:42

MikeyMo

95
1
2

Force table column widths to always be fixed regardless of contents

8 Answers8