在HTML和CSS中对表格单元格使用宽度自动

基本上

我有一个表，有4列，其中3列的宽度是固定的，1列的宽度是自动的。目前，它还不能使行适合整个表容器

这就是它的工作原理：

应该跨越表行的其余部分，并且没有任何需要调整的内容来实现这一点，以便

width:auto跨行

谢谢
我可以通过从
和
中删除
显示：块
来更正表格

应用
display:block
将这些元素更改为块元素而不是表元素，并中断表流

以下是我所做的更改：

style.css行：1711

.forum-table, .forum-table > tbody {
  /*display: block;*/
  width: 100%;
}

style.css行：1716

.forum-table > tbody > tr {
  position: relative;
  /*display: block;*/
  width: 100%;
  padding: 25px;
  background: rgba(0, 0, 0, 0.25);
}

此外，您不需要在
上显示
宽度：auto
：

style.css行：1732

.forum-table > tbody > tr > td.forum-name {
  /*width: auto;*/
}



这是一个例子

我还没有包括你所有的资源，所以有些东西（例如图像、javascript）区域被破坏了。但是所讨论的表格布局保持不变。
将像素转换为百分比

将基于像素的网站转换为响应百分比设计的标准解决方案是使用一套公式将像素宽度转换为其等效百分比

公式是：

公式：目标÷上下文=结果x 100=最终结果百分比

目标是需要转换的元素的像素大小

上下文是网站的像素大小

所以你的公式是：

第一个电池：52px÷1170px=0.044x100=4.44%

最后一个电池：250px÷1170px=0.1236 x100=21.36%

现在，您可以将所有单元格大小转换为百分比，以获得一致、可靠的结果。因此，单元格1的单元格大小为4.44%，单元格2的单元格大小为59.20%，单元格3的单元格大小为15%，单元格4的单元格大小为21.36%

注意：如果转换需要精确测量，请使用更多的小数位

这是一个易于使用的在线计算器：

将像素线框转换为百分比的良好概述：
我不清楚您在问什么。你的jsfiddle似乎起作用了。事实上怎么了？哦，我在你的编辑历史中看到了你的直播页面。您的
和
上有
display:block
声明，它们把事情搞砸了
style.css行：1711
和
style.css行：1716
。这是一个很好的解决方案，因为它使用百分比宽度，并且不依赖于所有不同的浏览器/设备试图在一个表中精确计算像素、百分比和自动计算。是的，你不能期望某个东西是相对于其他静态宽度的相对宽度，并且总是成比例的。