html - 如何使用 css 使 table td 占据整个宽度？

Question

我正在制作一个带有移动响应表格的网站。如何使用 css 使 table td 占据整个宽度（100%）？

<table>
    <tr>
        <td>Column One</td>
        <td>Column Two</td>
    </tr>
</table>

很难阅读彼此靠近的两列中的信息。

Answer 1

这将显示一个低于另一个的单元格：

td {display:block;width:99.9%;clear:both}

或者，如@nux 所述，

td {display:block; box-sizing:border-box; clear:both}

任何一个都应该足够了，尽管微软浏览器不会要求你，你可能需要这些专有标记；再说一次，如果人们打算在他们的手机上使用浏览器，他们就不会购买微软手机，所以问题很小。

Answer 2

在移动屏幕中，将 tr 更改为 display:flex 并将 td 设置为宽度 100%。如下所示：

@media screen and (max-width: 576px){
    tr {
      display: flex;
      flex-wrap: wrap;
    }
    
    td {
      width: 100%;
    }
}

如果您的表格 td 有边框，您可能希望删除移动设备中 td 边框的第一列，以便第一列 td 内容看起来与移动设备中的第二个 td 位于同一列中：

tr td:first-child {
  border: none;
}

Answer 3

上面的答案是正确的，但您还需要确保您的 td 元素具有 100% 宽度的参考，否则可能无法正常工作。您应该在样式表的开头设置此规则：

body, html {
    width: 100%;
}

查看此线程以获取更多信息： HTML table td not full width when using display block and 100% width attributes

Answer 4

首先，你需要确保你的表格有 100% 的宽度，然后你可以对 th 和 td 做同样的事情

table, td {
   width: 100%;
}

编辑：由于您编辑了原始帖子，因此您应该给第一个 td 上课

<td class="first">

td.first {
   width: 100%;
}

这将导致第一列尽可能多地使用页面，而第二个 td 将足够宽以容纳内容。如果您不希望文本换行或其他内容，您可能也必须给它一个宽度。