Home » Html » Set min-width in HTML table's <td>

Set min-width in HTML table's <td>

Posted by: admin November 30, 2017 Leave a comment

Questions:

My table has several columns.

Each column should have dynamic width that depends on the browser window size. On the other hand, each column must not be too tiny. So I tried to set min-width for those columns but it’s not a valid property. Tried min-width for <td> as well but that too is an invalid property.

Is there any way to set min-width for col/td in HTML table?

Answers:

try this one:

<table style="border:1px solid">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

Questions:
Answers:

min-width and max-width properties do not work the way you expect for table cells. From spec:

In CSS 2.1, the effect of ‘min-width’ and ‘max-width’ on tables, inline tables, table cells, table columns, and column groups is undefined.

This hasn’t changed in CSS3.

Questions:
Answers:

Try using an invisible element (or psuedoelement) to force the table-cell to expand.

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/

Questions:
Answers:
<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>