代码之家 › 专栏 › 技术社区 › Gilad Novik

如何使表格单元格拉伸剩余宽度?[副本]

flexbox css html

Gilad Novik · 技术社区 · 6 年前

这个问题已经有了答案:

How to make last cell of a row in a table occupy all remaining width 1个答案
CSS Table with one column taking remaining space 6个答案
HTML table last td to take remaining width 2个答案

我正试图创建一个简单的表,其中有3列:第一列/最后一列的宽度应该与子表的宽度完全相同,中间的一列应该拉伸并填充其余的列。

.table {
  display: table;
  width: 100%;
}

我试过两者都用 <table> 元素,以及 flex -但不确定如何做到这一点。

我可以使用flex在每行中执行,但是第一列/最后一列不会跨行对齐。此外,我不想为第一列/最后一列设置固定宽度。

2 回复 | 直到 6 年前

PierreN 6 年前

.table tr td:nth-child(2) { width:100% }

Gilad Novik 6 年前

<table>
    <tr>
        <td>1</td>
        <td style='width: 100%;'>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>-</td>
        <td>6</td>
    </tr>
</table>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前