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


73

在下面的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>

Answers:


106

您将需要告诉前两列不要换行,并为最后一列提供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中。

对列使用类(nth-child()如果仅针对现代浏览器,则可以使用css3选择器,而不是):

的HTML:

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

CSS:

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

1
不推荐使用<td>标记,但是如果您使用div和display:table-cell进行响应/ CSS表,则效果很好。
ckaufman

12
@ckaufman表不是弃用,很多属性是(widthnowrap等)。
jeroen

2
这行得通,但是我还必须向min-width表的第二列添加一个属性,以防止其缩小。
尤利西斯·阿尔维斯

如果最后一个表格单元格中包含一个下拉菜单,我希望与它所在的表格单元格具有相同的宽度,该怎么办。将下拉菜单的宽度设置为100%似乎不起作用,因为包含元素的宽度设置为99%。有没有简单的方法可以做到这一点?目前,我正在使用JavaScript在下拉列表打开时动态设置宽度。
flyingL123

@ flyingL123知道父级宽度是所需宽度的99%,可以将其设置为101%(99 + 0.09 = 99.9%)或根据需要设置更大一点。
兰迪·霍尔
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.