具有固定大小的第一列且其余列相等大小的HTML表格

Question

The table I have has one header column and remaining data columns. I wish to have the following:

• the table takes 100% of the screen width.
• the first column has a fixed width of 150px.
• Remaining columns to have widths divided equally. I had posted my code here
  

   #my-table{width:100%;border-collapse:collapse;} /*or whatever width you want*/ #my-table td{width:2000px;padding:4px;border:1px solid #000;vertical-align:top;} /*something big or 100%*/ #my-table td:first-child {width:150px;padding:4px;border:1px solid #000;vertical-align:top;} 

   <table id="my-table"><tr> <td> CELL 1 Whith a lot of text in it</td> <td> CELL 2 </td> <td> CELL 3 </td> <td> CELL 4 Whith a lot of text in it </td> <td> CELL 5 </td> </tr></table> 

Any assistance is appreciated.

Answer 1

All you need is to assign the following per td tag.

This way you can specify which column gets more space.

<td style="width:60%">... </td>
<td style="width:150px">... </td>

The browser will take care of the rest.

To force your width you can use

<td style="width: calc((100% - 150px)/5)">... </td> <!-- width is on fifth of remaining area -->

Please note that there are other solutions like css grid.

Answer 2

You should use th for the header cells:

<table>
  <tr>
    <th>Number</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

For the css:

table {
    width:100%;
}
th {
    width:150px;
} 
td {
   width: auto;
}

You can also omit the css for td, because 'width' is 'auto' by default.

Answer 3

You can add 'table-layout:fixed;' to #my-table and set the width of the first column with style attribute or through a css property.

<table id="my-table">
    <tr>
        <td style="width: 150px;"> CELL 1 Whith a lot of text in it</td>
        <td> CELL 2 </td>
        <td> CELL 3 </td>
        <td> CELL 4 Whith a lot of text in it </td>
        <td> CELL 5 </td>
   </tr>
</table>

#my-table {
  width:100%;
  border-collapse:collapse;
  table-layout: fixed;
}

#my-table td {
  padding:4px;
  border:1px solid #000;
  vertical-align:top;
}