有没有一种方法可以使用HTML/CSS(具有相对大小)使一行单元格延伸到包含它的表格的整个宽度?

单元格的宽度应该相等,外部表格的大小也是动态的,为<table width="100%">.

目前,如果我没有指定一个固定的大小;细胞只是自动调整大小以适应其内容.

推荐答案

你甚至不需要为细胞设置一个特定的宽度,table-layout: fixed个就足以均匀地分布细胞.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}
<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

请注意,对于table-layout,表格样式元素必须设置宽度(在我的示例中为table-layout%).

Html相关问答推荐

使用Scrapy Select 最后一个子文本

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表?

如何在angular 17.2中使用routerLink解决此错误

如何在Vim中删除Html标签?

在iOS中调整HTML邮箱内容的大小

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

在将DevExtreme升级到版本23.2之后,到处都会生成一个Pesudo类,我在其中使用了<;DXi-Item Title=&Quot;&Quot;>;

Style=背景图像URL引用变成&;Quot;

在弹性框布局中的第n个元素后强制换行

角化、剪裁、边缘,但仅在底部2和平滑包装上

CSS:双面元素未正确显示边框

在显示 swift ui 之前加载下一个 YouTube 视频

在span中添加

从触发元素移动到有间隙的内容时 CSS 工具提示关闭

表格中每 4 行条纹一次

变换元素以适应高度(Angular,SCSS)

列宽等于最宽列宽度的无界容器

两个按钮范围滑块的 CSS

所有幻灯片上的 Quarto RevealJS 标题

那里有一个类似于 ?