How to set the maximum width of a table cell using percent?

Question

<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 to set the maximum width of a table cell using percent?

Answer 1

According to the definition of max-width in the CSS 2.1 specification, the "min-width" and 'max-width' effect on tables, embedded tables, table cells, table columns, and column groups are undefined. " Thus, you cannot directly set max-width on a td element.

If you want the second column to occupy no more than 67%, you can set the width (which is the minimum width for table cells) to 33%, for example. in case example

 td:first-child { width: 33% ;} 

A setting that for both columns will not work so well, since it tends to turn browsers into columns of equal width.

Answer 2

An old question I know, but now it is possible using the table-layout: fixed properties of the css table-layout: fixed in the table tag. Below answer this question CSS percentage width and text overflow in table cell

This is easy to do using table-layout: fixed , but a bit complicated because not many people know about this CSS property.

 table { width: 100%; table-layout: fixed; } 

See it in action on the updated fiddle here: http://jsfiddle.net/Fm5bM/4/

Answer 3

I know that this is literally a year later, but I decided that I would share it. I tried to do the same and came across this solution which worked for me. We set the maximum width for the entire table, and then process the cell sizes for the desired effect.

Place the table in your own div, then set the width, minimum width and / or maximum width of the div as required for the entire table. Then you can work and set the width and the minimum width for other cells, and the maximum width for the div to work efficiently and backward to achieve the maximum width we wanted.

 <div id="tablediv"> <table width="100%"> <tr> <td class="tdleft">Test</td> <td>A long string blah blah blah</td> </tr> </table> </div> 

Then in your styles, put:

 #tablediv { width:90%; min-width:800px max-width:1500px; } .tdleft { width:20%; min-width:200px; } 

Admittedly, this does not give you the maximum cell width per se, but it does allow some controls that may work instead of this option. Not sure if it will work for your needs. I know that this worked for our situation, when we want the navigation side on the page to scale up and down to a point, but for all wide screens these days.

Answer 4

the percentage should refer to the absolute size, try the following:

 <table> <tr> <td>Testasdas 3123 1 dasd as da</td> <td>A long string blah blah blah</td> </tr> </table> <style> table{width:200px;} td{width:65%;border:1px solid black;} </style>