如何使表格中一行的最后一个单元格占据所有剩余宽度

Question

在下面的 HTML 片段中，如何使包含“LAST”的列的宽度占据该行的其余部分，并且包含“COLUMN ONE”和“COLUMN TWO”的列的宽度足以包含它们的宽度内容，并且不能更大。

谢谢你

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <table width="100%">
        <tr>
          <td>
            <span>
             COLUMN
           </span>
            <span>
             ONE
           </span>
          </td>
          <td>
            COLUMN TWO
          </td>
          <td>
            LAST
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      ANOTHER ROW
    </td>
  </tr>

</table>

Answer 1

您需要告诉前两列不要换行，并将最后一列的宽度设置为 99%：

<table width="100%">
       <tr>
         <td style="white-space: nowrap;">
           <span>
             COLUMN
           </span>
           <span>
             ONE
           </span>
         </td>
         <td style="white-space: nowrap;">
            COLUMN TWO
         </td>
         <td width="99%">
           LAST
         </td>
       </tr>
     </table>

编辑：您应该将所有样式/演示文稿放入（外部...）CSS中。

为列使用类（如果您只针对现代浏览器，则可以使用 css3 选择器，例如

nth-child()

）：

html:

<tr>
  <td class="col1">
  // etc

CSS：

.col1, .col2 {
  white-space: nowrap;
}
.col3 {
  width: 99%;
}