Set the table column width constant regardless of the amount of text in its cells?

Question

In my table I set the width of the first cell in a column to be 100px.
However, when the text in one of the cell in this column is too long, the width of the column becomes more than 100px. How could I disable this expansion?

http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table might help point you in the right direction — justinl, Dec 16 '10 at 04:49
In my case not expansion happened, but the opposite: unwanted shrink of width despite of my explicit width declaration. Ridiculous! — Csaba Toth, Jul 28 '14 at 05:49
The only correct solution to this is to use colgroup with cols in it, and set the cols width. — MightyPork, Mar 18 '15 at 19:46

score 744 · Accepted Answer · edited May 03 '20 at 17:33

744

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Here it is in JSFiddle

This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words

edited May 03 '20 at 17:33

Cristian Ciupitu

20,270
7
50
76

answered Dec 16 '10 at 06:04

ptpaterson

9,131
4
26
40

91

Its important to notice this: "The browser will then set column widths based on the width of cells in the first row of the table", from http://stackoverflow.com/questions/570154/html-table-keep-the-same-width-for-columns – daniloquio Feb 09 '12 at 19:31
14

It does work when the table width is not fixed. http://jsfiddle.net/lavinski/CGCFW/3/ You just need a dynamic row to take up the remaining space. – Daniel Little Dec 13 '12 at 02:58
3

@DanielLittle alternatively you can set the table width to 1px; with `overflow: visible` for tables of dynamic size, as long as the size of the cells is fixed and overflow is visible it doesn't matter if the size of the table itself is bigger or smaller than the actual cells. – Mahn Jul 28 '15 at 17:12
What could you do if your td has "width=30%;"? – 71GA Dec 06 '15 at 19:30
1

If the table has a `width`, even using `table-layout: fixed` the columns width will not be fixed because some columns will get enlarged to fill the table width, if the sum of all columns width is less than the table width. To avoid that you need what @MitjaGustin [answer](http://stackoverflow.com/a/30025605/2814308) below suggests. However, if you specify the width of all columns then there is no point in also specifying the table width. – SantiBailors Jan 25 '17 at 08:32

score 232 · Answer 2 · edited Mar 06 '14 at 16:01

232

See: http://www.html5-tutorials.org/tables/changing-column-width/

After the table tag, use the col element. you don't need a closing tag.

For example, if you had three columns:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

edited Mar 06 '14 at 16:01

vanthome

4,816
37
44

answered Apr 08 '13 at 16:15

Hyathin

2,329
1
12
2

2

@Sam you may have had some other issue overriding this such as CSS, inline style, or incorrect doctype etc.. This definitely works, its the standard way to set column styles. – Sameer Alibhai Jan 27 '15 at 16:10
I'm not sure if this is the 'HTML5 way' at all. It appears that colgroup/col in html5 is only really used for marking spans. MDN makes no mention of the use of the style attribute on col tags (other than it inherits it from global attributes) and only says of bgcolor: "...use the CSS property... on the relevant elements." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col. – Stephen Panzer Aug 03 '15 at 23:23
9

Worked for me with table style `table-layout: fixed; width: 100%;`. Thanks! – nrodic Jan 18 '16 at 19:20
It's not end-all/definitive, but w3schools also does not mention the use of `col` for this. It suggests the use of css applied to a `` (or a `) - http://www.w3schools.com/tags/att_td_width.asp – Don Cheadle Feb 18 '16 at 15:25
@Hyathin Your solution worked like a charm for me (thank you) - no extra efforts required. But it may differ for others depending on their situations. Or, maybe HTML5 is more stable now in 2017. – nam Jan 24 '17 at 16:57
I did originally upvote this answer BUT it's recently come to my attention that colgroups aren't that well supported and do break in versions of IE. – A Friend Nov 17 '20 at 06:46
It actually has nothing to do with HTML5. It does have to do with CSS, and it's been supported as far back as [CSS 2.1](https://www.w3.org/TR/CSS21/tables.html#columns). Besides, the element itself is also HTML4 – aross Apr 15 '21 at 13:11
Using this along with `table-layout: fixed; width: 100%;`, and using the widths in pixels (e.g. ``) worked for me. – Omar Shishani Jun 29 '23 at 19:40

score 150 · Answer 3 · answered May 06 '12 at 22:25

150

Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.

eg.

<td><div style="width: 50px" >...............</div></td>

answered May 06 '12 at 22:25

KAsun

1,555
1
9
2

3

I combined this solution with also specifying min-width/max-width for the same pixels width just to be on the safe side. Finally it's working. I don't know why I have to run all of these extra rounds just get it really fixed, ridiculous... – Csaba Toth Jul 28 '14 at 05:48
1

Unsure of how this is better than setting that same css `style="width: 50px"` on the `` – Don Cheadle Feb 18 '16 at 15:26
5

@mmcrae It's better because it works, setting width on `` doesn't. – Madbreaks Jan 04 '17 at 20:35
Ridiculous, but for me the easiest working solution in combination with `display:inline-block; word-break:break-word;`. – qräbnö Nov 10 '20 at 23:33
Works like a charm! Seems to be forcing the width of the "td" – Carlos Cruz Feb 03 '21 at 16:44

score 76 · Answer 4 · answered Sep 06 '12 at 12:28

76

If you need one ore more fixed-width columns while other columns should resize, try setting both min-width and max-width to the same value.

answered Sep 06 '12 at 12:28

scrrr

5,135
7
42
52

1

This worked for me when setting the width explicitly with `table-layout: fixed;` did not. – Jordan Mack May 12 '16 at 20:18

score 45 · Answer 5 · edited Aug 13 '13 at 13:10

45

You need to write this inside the corresponding CSS

table-layout:fixed;

edited Aug 13 '13 at 13:10

doubleDown

8,048
1
32
48

answered Dec 16 '10 at 04:47

vinoth kumar

659
2
6
13

better sorround table with div tags then inside div use overflow:auto – vinoth kumar Dec 16 '10 at 06:00
Worked for me when I combined it with column groups: ...
. – Russ Bateman Jul 08 '15 at 03:13
This Chris Coyer article explains it well: https://css-tricks.com/fixing-tables-long-strings/ – cssyphus Nov 12 '15 at 02:33

score 28 · Answer 6 · edited Aug 13 '13 at 13:09

What I do is:

Set the td width:

<td width="200" height="50"><!--blaBlaBla Contents here--></td>

Set the td width with CSS:
```
<td style="width:200px; height:50px;">
```

Set the width again as max and min with CSS:

<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

It sounds little bit repetitive but it gives me the desired result. To achieve this with much ease, you may need put the CSS values in a class in your style-sheet:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

then:

<td class="td_size">

Place the class attribute to any <td> you want.

This was the only solution that seemed to work in all cases without imposing extra, potentially-unwanted restrictions. — Sam, Jan 05 '15 at 04:44

score 7 · Answer 7 · edited May 30 '19 at 09:08

7

Setting this:

style="min-width:100px;"

Worked for me.

edited May 30 '19 at 09:08

Jack Bashford

43,180
11
50
79

answered May 30 '19 at 08:47

Priyanka Arora

409
4
10

score 5 · Answer 8 · answered Nov 02 '18 at 14:52

As per my answer here, it is also possible to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

View Result

Alternatively, use colgroup as suggested in Hyathin's answer.

score 4 · Answer 9 · edited Sep 08 '13 at 21:01

4

I used this

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

edited Sep 08 '13 at 21:01

JustinStolle

4,182
3
37
48

answered May 10 '13 at 21:40

Svetoslav Marinov

1,498
14
11

Don't forget ntch-child(2) (or 3, 4 and so on) – Sep 17 '13 at 13:50
table td nth-child(n+1) {...} will cover all but the first column – Ed Randall Jul 09 '15 at 06:31
Should we set the table-layout: fixed; or display: table; for the table element in order for this td:first-child and nth-child(n) selector to work? – user2749166 Oct 14 '20 at 08:39

score 3 · Answer 10 · answered May 04 '15 at 08:19

3

It also helps, to put in the last "filler cell", with width:auto. This will occupy remaining space, and will leave all other dimensions as specified.

answered May 04 '15 at 08:19

Mitja Gustin

1,723
13
17

Willy Richardson · Answer 11 · 2017-06-03T14:48:57.447

Make the accepted answer respond for small screens when smaller than the fixed width.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

score 3 · Answer 12 · answered Mar 24 '12 at 04:21

3

If you don't want a fixed layout, specify a class for the column to be size appropriately.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

answered Mar 24 '12 at 04:21

mcdado

718
1
8
15

score 1 · Answer 13 · answered Jul 11 '12 at 00:35

KAsun has the right idea. Here is the correct code...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Dan Macak · Answer 14 · 2019-12-16T08:52:38.887

1

I use an ::after element in the cell where I want to set a minimal width regardless of the text present, like this:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

I don't have to set width on the table parent nor use table-layout.

edited Dec 16 '19 at 08:52

answered Dec 16 '19 at 08:37

Dan Macak

16,109
3
26
43

RafaSashi · Answer 15 · 2022-10-06T11:13:59.423

If you have a limited access to the table, using a class or inline style could be complicated.

Alternatively your can target the first td and th child of each row (aka the first column)

The rule bellow worked for me when I tested it with width but didn't work with max-width for some reason:

thead, tbody tr {
            
    display:table;
    width:100%;
    table-layout:fixed;
}

tr th:first-child, tr td:first-child {
                
    width:100px;
}

score 1 · Answer 16 · answered Dec 09 '22 at 20:17

Getting proper sizing on a table is tricky. The only approach that has really worked for me is using table-layout: fixed; in combination with specified widths on each th. And a width: auto; on the one column you wouldn't mind growing.

Here's an example using a classless table. A classed version would be need if you're doing some dynamic columns.

table {
  table-layout: fixed;
}

th,td {
  text-align: left;
  vertical-align: top;
  /* use this in the columns where you're not concerned with new lines */
  word-break: break-word;
}

th:first-child, th:last-child {
  width: 5ch;
  text-align: center;
}

th:nth-child(n + 2):nth-child(-n + 3) {
  background: red;
  width: 25%;
}

th:nt-child(4) {
  background: blue;
  width: auto;
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Description</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
    <tr>
      <th>2</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
    <tr>
      <th>3</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
    <tr>
      <th>4</th>
      <th>John</th>
      <th>Smith</th>
      <th>Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a</th>
      <th>30</th>
    </tr>
  </tbody>
</table>

user3229980 · Answer 17 · 2016-09-19T00:54:50.520

-4

I found KAsun's answer works better using vw instead of px like so:

<td><div style="width: 10vw" >...............</div></td>

This was the only styling I needed to adjust the column width

edited Sep 19 '16 at 00:54

answered Sep 19 '16 at 00:36

user3229980

1
3

score -5 · Answer 18 · answered Sep 09 '13 at 09:07

-5

You don't need to set "fixed" - all you need is setting overflow:hidden since the column width is set.

answered Sep 09 '13 at 09:07

Vladimír Hála

168
7

4

Which will hide the content behind cell borders, not a good idea. – zrooda Jan 06 '15 at 11:13

Set the table column width constant regardless of the amount of text in its cells?

18 Answers18

Linked

Related