有没有一种方法可以使用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相关问答推荐

FlexBox 将元素挤压在一起

如何在输入框上方对齐的单行中对齐标签文本(多语言)

如何在按钮的中心添加两条线

如何在小型显示器中调整 svg 位置?

css如何调整元素内容的高度

四列布局未调整到屏幕大小

编写在行之间具有多个标题的 HTML 表格的最佳方法是什么?

如何在 Common Lisp 中识别 dex:get 的输出是 JSON 还是 HTML?

在 flex 中应用装饰的文本链接

如何按元素的水平对齐文本?

如何在数据表的第一列标题中添加一条垂直线?

内容在放大时不适合屏幕,缩小时会留下空白

如何在有边距的容器中获取带有渐变的背景图像?

带有 ul 后跟输入的 Flexbox 行布局

如何以相反的顺序放置一个包裹的行

如何重复网格自动行的高度

如何在 iOS11 主屏幕 Web 应用上访问相机?

如何从网页中提取svg作为文件

如何在 Angular 的模板中声明变量

如何关闭 html 输入表单字段建议?