<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td {
max-width: 67%;
}
</style>
The above does not work. How can I set the max-width
of a table cell using percentages?
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td {
max-width: 67%;
}
</style>
The above does not work. How can I set the max-width
of a table cell using percentages?
Old question I know, but this is now possible using the css property table-layout: fixed
on the table tag. Answer below from this question CSS percentage width and text-overflow in a table cell
This is easily done by using table-layout: fixed
, but a little tricky because not many people know about this CSS property.
table {
width: 100%;
table-layout: fixed;
}
See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/
text-overflow: ellipsis;
and can also add a scroll bar. CSS-Tricks as a great write up: css-tricks.com/fixing-tables-long-strings
Commented
Mar 19, 2017 at 18:51
max-width
in that jsfiddle, the width will remain the same so it's not the max-width
that sets it. It might be clearer if you replace it with a max-width: 10%
for the first td
... you'll see that it does not change. jsfiddle.net/w3f8ey22/1
According to the definition of max-width in the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.
If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case
td:first-child { width: 33% ;}
Setting that for both columns won’t work that well, since it tends to make browsers give the columns equal width.
max-width
for td
is respected (to some degree) if width
is also set AND width
and max-width
both have either length units or percentage units. With table-layout:fixed
it is respected without regards to the content.
I know this is literally a year later, but I figured I'd share. I was trying to do the same thing and came across this solution that worked for me. We set a max width for the entire table, then worked with the cell sizes for the desired effect.
Put the table in its own div, then set the width, min-width, and/or max-width of the div as desired for the entire table. Then, you can work and set width and min-widths for other cells, and max width for the div effectively working around and backwards to achieve the max width we wanted.
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
<div id="tablediv">
<table width="100%" border="1">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>
Admittedly, this does not give you a "max" width of a cell per se, but it does allow some control that might work in-lieu of such an option. Not sure if it will work for your needs. I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days.
the percent should be relative to an absolute size, try this :
table {
width:200px;
}
td {
width:65%;
border:1px solid black;
}
<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>
I have found a solution for my project, how cells to be dynamic width, like (width:min-content
) behavior.
Maybe you can use this trick to limit your cell.
table {
width: 100%;
border: 1px solid black;
}
table td {
width: 100%;
}
table td:first-child {
width: auto;
white-space: nowrap;
}
table td:nth-child(2) {
width: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
padding-right: 5px;
}
td:last-child {
padding-right: unset;
}
<table>
<tbody>
<tr>
<td >
<div class="">dymaic cell</div>
</td>
<td>one way</td>
<td>sweater, jumper,worm</td>
<td class="text-right">
<button></button>
</td>
</tr>
<tr>
<td >
<div class="">dymaic text</div>
</td>
<td>one way</td>
<td>sweater, jumper,worm</td>
<td class="text-right">
<button></button>
</td>
</tr>
<tr>
<td >
<div class="">dymaic text ,, very long</div>
</td>
<td>two ways</td>
<td>sweater, jumper,worm , jumper,worm</td>
<td class="text-right">
<button></button>
</td>
</tr>
</tbody>
</table>
The solution I've found is to use a div
inside the td
with the following CSS properties:
max-width: 300px; // Desired max width
width: max-content;
You can set the width of a different td
to be 100%
which will take the remaining space in the table.
This works in Chrome... just set the width attribute on the td tag.
td width=600px