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?
18 Answers
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>
This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words
-
91Its 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/… Feb 9, 2012 at 19:31
-
14It 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. Dec 13, 2012 at 2: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.– MahnJul 28, 2015 at 17:12 -
-
1If the table has a
width
, even usingtable-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. Jan 25, 2017 at 8:32
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>
-
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. Jan 27, 2015 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 <td> elements." developer.mozilla.org/en-US/docs/Web/HTML/Element/col. Aug 3, 2015 at 23:23
-
7Worked for me with table style
table-layout: fixed; width: 100%;
. Thanks!– nrodicJan 18, 2016 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<td>
(or a<th
>) - w3schools.com/tags/att_td_width.asp Feb 18, 2016 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.– namJan 24, 2017 at 16:57
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>
-
3I 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... Jul 28, 2014 at 5:48
-
1Unsure of how this is better than setting that same css
style="width: 50px"
on the<td>
Feb 18, 2016 at 15:26 -
5@mmcrae It's better because it works, setting width on
<td>
doesn't. Jan 4, 2017 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, 2020 at 23:33 -
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.
-
1This worked for me when setting the width explicitly with
table-layout: fixed;
did not. May 12, 2016 at 20:18
You need to write this inside the corresponding CSS
table-layout:fixed;
-
better sorround table with div tags then inside div use overflow:auto Dec 16, 2010 at 6:00
-
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>. Jul 8, 2015 at 3:13
-
This Chris Coyer article explains it well: css-tricks.com/fixing-tables-long-strings– cssyphusNov 12, 2015 at 2:33
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.– SamJan 5, 2015 at 4:44
-
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;
}
Alternatively, use colgroup
as suggested in Hyathin's answer.
I used this
.app_downloads_table tr td:first-child {
width: 75%;
}
.app_downloads_table tr td:last-child {
text-align: center;
}
-
Don't forget ntch-child(2) (or 3, 4 and so on)– user3458Sep 17, 2013 at 13:50
-
-
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? Oct 14, 2020 at 8:39
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>
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.
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
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>
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.
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;
}
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>
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
You don't need to set "fixed"
- all you need is setting overflow:hidden
since the column width is set.
-
4
table-layout:fixed;
is the solution