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?

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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.

Answer 5

You need to write this inside the corresponding CSS

table-layout:fixed;

Answer 6

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.

Answer 7

Setting this:

style="min-width:100px;" 

Worked for me.

Answer 8

I used this

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

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

Answer 9

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.

Answer 10

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>

Answer 11

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.

Answer 12

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/

Answer 13

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>

Answer 14

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;
}

Answer 15

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>

Answer 16

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.

Answer 17

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

Answer 18

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