How to Set the Max-Width of a Table Cell Using Percentages

How can I set the max-width of a table cell using percentages?

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.

CSS text-overflow table cell with percentage max width

This cannot work with a standard HTML table: the automatic layout algorithm will keep stretching cells so they can always fit their contents, even ignoring explicit widths.

Switch to table-layout:fixed and everything will work as intended.

HTML table: column width percentage

To fixe width, you can use table-layout:fixed; .

You may also want to use the colgroup and col tags to assign at once width and bg to your columns.

table {  width: 100%;  table-layout: fixed;}.ten {  width: 10%;  background: tomato;}.twenty {  width: 20%;  background: turquoise}/* see me */td {  border: solid;}/* play with bg cells and cols ? */
tr:nth-child(even) :nth-child(odd) {  background:rgba(100,255,50,0.3);  }tr:nth-child(odd) :nth-child(even) {  background:rgba(255,255,255,0.3);  }

<table>  <colgroup>    <col class="ten" />    <col class="ten" />    <col class="ten" />    <col class="twenty" />    <col class="twenty" />    <col class="twenty" />    <col class="ten" />  </colgroup>  <tr>    <th>H1</th>    <th>H2</th>    <th>H3</th>    <th>H4</th>    <th>H5</th>    <th>H6</th>    <th>H7</th>  </tr>
  <tr>    <td>A1</td>    <td>A2</td>    <td>A3</td>    <td>A4</td>    <td>A5</td>    <td>A6</td>    <td>A7</td>  </tr>
  <tr>    <td>B1</td>    <td>B2</td>    <td>B3</td>    <td>B4</td>    <td>B5</td>    <td>B6</td>    <td>B7</td>  </tr> <tr>    <td>A1</td>    <td>A2</td>    <td>A3</td>    <td>A4</td>    <td>A5</td>    <td>A6</td>    <td>A7</td>  </tr>
  <tr>    <td>B1</td>    <td>B2</td>    <td>B3</td>    <td>B4</td>    <td>B5</td>    <td>B6</td>    <td>B7</td>  </tr>
</table>

CSS - table cell - min-width - percentage and pixels: How to solve this?

If you add a div as an immediate child of the input-cell and give that min-width: 40vw (do note I'm using 40vw viewport width units), and then either add another element between the div and the textarea, or simply as I did here, give the textarea a min-width: 200px, both your minimum width's requirements are fulfilled.

Fiddle demo

Stack snippet

table {  width: 100%;  table-layout: auto;}
.input-cell {  width: 40%;}
.input-cell > div {  min-width: 40vw;  border: 1px solid red;}
textarea,input {  width: 95%;  min-width: 200px;}

<table>  <thead>    <tr valign="top">      <th scope="row">Setting</th>      <th scope="row">Value</th>      <th scope="row">Beschreibung</th>      <th scope="row">ID</th>    </tr>  </thead>  <tbody>    <tr valign="top">      <td valign="top">Post Widget: Output callbacks</td>      <td valign="top" class="input-cell">        <div>          <textarea id="foo" name="bar" rows="7">Lorem ipsum ...</textarea>        </div>      </td>      <td class="description" valign="top">Lorem ipsum dolor sit amet.</td>      <td class="cis_field_id" valign="top">master_cum_esse_sunc_veniat</td>    </tr>    <tr valign="top">      <td valign="top">Post Widget: Output callbacks</td>      <td valign="top" class="input-cell">        <input type="text" name="lorem" id="aliquot" value="abc" />      </td>      <td class="description" valign="top">Lorem ipsum dolor sit amet.</td>      <td class="cis_field_id" valign="top">master_cum_esse_sunc_veniat</td>    </tr>  </tbody></table>

Max width in percentage inside table-cell display container

Inspiration : This answer

What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule.

<div style="display: table; table-layout: fixed;  width: 500px;">
  <div style="display: table-cell;">
    <img src="http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_k4PiHxO.jpg" style="max-width: 90%">
  </div>
</div>

Fiddle

max-width does not work for table cell

By adding a div to each cell and use max/min-width on the those, you can control the cells better, here is a sample

table.result {  width: 100%;}
.result td:nth-child(3) {  width: 100%;}
.result td:nth-child(1) div {  min-width: 40px;  max-width: 50px;}
.result td:nth-child(2) div {  min-width: 100px;  max-width: 150px;}

<table class="result" border="1">  <tr>    <td>      <div>        Row      </div>    </td>    <td>      <div>        Name      </div>    </td>    <td>Description</td>  </tr></table>

How do I set max-width for a table cell?

Use the CSS properties word-wrap and word-break like shown below:

#test {  width: 20%;   word-break: break-all;  word-wrap: break-word;}

<table>  <tr>    <td id="test">      <ul>        <li>HiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiByeHiBye</li>      </ul></td>      <td>        Box 2: Where is its 80% width?      </td>  </tr></table>