702

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?

Improve this question
4
  • 6
    stackoverflow.com/questions/1258416/word-wrap-in-a-html-table might help point you in the right direction Commented Dec 16, 2010 at 4:49
  • 3
    In my case not expansion happened, but the opposite: unwanted shrink of width despite of my explicit width declaration. Ridiculous! Commented Jul 28, 2014 at 5:49
  • The only correct solution to this is to use colgroup with cols in it, and set the cols width. Commented Mar 18, 2015 at 19:46
  • 3
    table-layout:fixed; is the solution Commented Aug 29, 2015 at 18:48

19 Answers 19

Reset to default
779

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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 stackoverflow.com/questions/570154/…
It does work when the table width is not fixed. jsfiddle.net/lavinski/CGCFW/3 You just need a dynamic row to take up the remaining space.
@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.
What could you do if your td has "width=30%;"?
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 below suggests. However, if you specify the width of all columns then there is no point in also specifying the table width.
246

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>
Improve this answer

8 Comments

@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.
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 <td> elements." developer.mozilla.org/en-US/docs/Web/HTML/Element/col.
Worked for me with table style table-layout: fixed; width: 100%;. Thanks!
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 <td> (or a <th>) - w3schools.com/tags/att_td_width.asp
@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.
|
160

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>
Improve this answer

6 Comments

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...
Unsure of how this is better than setting that same css style="width: 50px" on the <td>
@mmcrae It's better because it works, setting width on <td> doesn't.
Ridiculous, but for me the easiest working solution in combination with display:inline-block; word-break:break-word;.
Works like a charm! Seems to be forcing the width of the "td"
|
78

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.

Improve this answer

1 Comment

This worked for me when setting the width explicitly with table-layout: fixed; did not.
47

You need to write this inside the corresponding CSS

table-layout:fixed;
Improve this answer

3 Comments

better sorround table with div tags then inside div use overflow:auto
Worked for me when I combined it with column groups: <table style="table-layout: fixed"><colgroup><col style="width: 50%"><col style="width: 50%"></colgroup><tbody>...</tbody></table>.
This Chris Coyer article explains it well: css-tricks.com/fixing-tables-long-strings
30

What I do is:

  1. Set the td width: 

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

  2. Set the td width with CSS: 

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

  3. 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.

Improve this answer

2 Comments

This was the only solution that seemed to work in all cases without imposing extra, potentially-unwanted restrictions.
min/max didn't worked for me
8

Setting this:

style="min-width:100px;"

Worked for me.

Improve this answer

Comments

5

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.

Improve this answer

Comments

5

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 needed if you're doing some dynamic columns.

table {
  table-layout: fixed;
}

th,
td {
  text-align: left;
  vertical-align: top;
}

th:first-child, th:last-child {
  background: yellow;
  width: 5ch;

}

th:first-child, th:last-child,
td:first-child, td:last-child {
  text-align: center;
}

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

th:nth-child(4) {
  background: blue;
  /* use this in the columns where you're not concerned with new lines */
  word-break: break-word;
  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>
  <td>1</td>
  <td>John</td>
  <td>Smith</td>
  <td>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</td>
  <td>30</td>
</tr>
<tr>
  <td>2</td>
  <td>John</td>
  <td>Smith</td>
  <td>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</td>
  <td>30</td>
</tr>
<tr>
  <td>3</td>
  <td>John</td>
  <td>Smith</td>
  <td>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</td>
  <td>30</td>
</tr>
<tr>
  <td>4</td>
  <td>John</td>
  <td>Smith</td>
  <td>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</td>
  <td>30</td>
</tr>
  </tbody>
</table>

Improve this answer

Comments

4

I used this

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

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

3 Comments

Don't forget ntch-child(2) (or 3, 4 and so on)
table td nth-child(n+1) {...} will cover all but the first column
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?
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>
Improve this answer

Comments

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.

Improve this answer

Comments

3

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/

Improve this answer

Comments

2

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;
}
Improve this answer

Comments

1

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>
Improve this answer

Comments

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.

Improve this answer

Comments

1

For me, it worked by setting:

Table: width: 100% and table-layout: fixed;

for each <th>: min-width: 10px; width: 10px; max-width: 10px;

for each <td>: overflow: hidden;

Improve this answer

Comments

-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

Improve this answer

Comments

-5

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

Improve this answer

1 Comment

Which will hide the content behind cell borders, not a good idea.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.