How can I Set Max-Width for Table Cells using Percentages in HTML?

Setting Max-Width of Table Cells Using Percentages

In HTML tables, setting the max-width property of table cells using percentages can sometimes prove challenging. Let's explore how to achieve this:

<br><table><br>  <tr></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><td>Test</td>
<td>A long string blah blah blah</td>

Copy after login

The code above may not produce the desired effect because of the limitations of the CSS rules. To overcome this, we employ the lesser-known table-layout property:

<br>table {<br>  width: 100%;<br>  table-layout: fixed;<br>}<br>

By setting table-layout to fixed, the browser evenly distributes the remaining width among the table cells, allowing you to set max-width percentages as desired.

Check out the updated fiddle here: http://jsfiddle.net/Fm5bM/4/ to witness the implementation in action.

The above is the detailed content of How can I Set Max-Width for Table Cells using Percentages in HTML?. For more information, please follow other related articles on the PHP Chinese website!