Question

基本上，

我有一个包含4列的表，其中3列有固定宽度，1表示宽度为auto。目前，并不是要使行适合整个表容器。

应该跨越表格的其余部分并且它没有我应该调整以实现这一点以便width: auto;跨越行？

由于

Answer 1

我可以通过从display:block和<tbody>移除<tr>来更正表格。

应用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);
}

此外，width:auto：

上不需要<td>

style.css行：1732

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

我没有包含您的所有资源，因此某些内容（例如图片，javascript）区域已损坏。但是有问题的桌面布局仍然完好无损。

Answer 2

将像素转换为百分比

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

公式为：

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

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

上下文是您网站的像素大小。

所以你的公式将是：

First Cell： 52px÷1170px = 0.044 x 100 = 4.44％

最后一个单元格： 250px÷1170px = 0.1236 x100 = 21.36％

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

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

这是一款易于使用的在线计算器：http://rwdcalc.com/