Question

我有一个包含3列的HTML表格。它的固定宽度为600px。

<table>
  <tr>
    <td>Name</td>
    <td>Qty</td>
    <td>Actions</td>
  </tr>
</table>

我希望Qty和Actions列尽可能小（将内容保持为一行），并希望Name列占用剩余的可用空间。 “数量”和“操作”列的大小会根据内容/字体大小而变化，因此固定宽度在这种情况下不起作用。

有没有办法在HTML / CSS中执行此操作？或者这是我需要打破Javascript的东西吗？

Answer 1

您可以在该列上应用width =“99％”。例如：

<table> 
  <tr> 
    <td width="99%">Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
  </tr> 
</table>

Answer 2

你可以使用max-width：99％;在第一列上，并在其他列上给出固定的大小（我使用像素大小的列）。

<table style="width: 100%;">
  <tr>
    <td style="max-width: 99%">
      Will max
    </td>
    <td style='width:110px;'> 
      fixed size here
    </td>
  </tr>
</table>

如何使一个表格列填充所有备用水平空间？

2 个答案: