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

发布于06月30日

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

推荐答案

您需要告诉前两列不要换行，并将最后一列的宽度设置为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>

Edit:.你应该把所有的风格/表现都放在(外部…)css.

为列使用类(如果只针对现代浏览器，可以使用css3 Select 器，比如nth-child()):

HTML:

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

CSS:

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

Css相关问答推荐

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

推荐答案

Css相关问答推荐

我试图用图像填充行的一列

为什么我的Angular material css文件不工作？

如何在CSS中平滑线性平移动画

如何以Angular 将下拉面板的宽度与其文本框对齐

导航栏没有使用nextui获取页面的全部宽度

创建一个CSS动画的对角线线条.

如何按列垂直对齐项目，但不在列内水平对齐

条件宽度和省略号不适用于样式化组件 - React.js

tailwind css 中的自定义组状态

BootStrap：右对齐嵌套手风琴

为什么我的 CSS 需要一个它似乎不需要的大括号？

如何使半圆的边框淡出？

仅对父容器应用模糊效果

使用 CSS 在悬停时转换 SVG 路径的填充属性

将一行文本保留为单行 - 换行或不换行

在固定高度的输入字段中垂直对齐文本而不显示：表格或填充？

表格溢出时水平滚动

css 中的 clearfix 类有什么作用？

标签的 CSS 宽度

通过 JavaScript 更改 CSS 伪元素样式