如何使用css使表td占用整个宽度？

Question

我正在创建一个表格移动响应的网站。如何使用css使表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

首先，你需要确保你的桌子有100％的宽度，然后你可以用th和td做同样的事情

table, td {
   width: 100%;
}

编辑： 既然你编辑了你的原帖，你应该给第一个td一个类

<td class="first">

td.first {
   width: 100%;
}

这将导致第一列尽可能多地使用页面，第二列仅对内容足够宽。如果你不想让你的文字换行，你可能也要给它一个宽度。

Answer 3

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

body, html {
    width: 100%;
}

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

Answer 4

在移动屏幕中，将 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;
}