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

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

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

第一栏
第二栏

---

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

首先，您需要确保表的宽度为100%，然后您可以对th和td执行相同的操作

table, td {
   width: 100%;
}

编辑： 既然你编辑了你的原创文章，你应该给第一个td一个等级

<td class="first">

td.first {
   width: 100%;
}

td.首先{
宽度：100%；
}

---

这将导致第一列使用尽可能多的页面，而第二个td的宽度刚好足以容纳内容。如果您不想让文本换行或做其他事情，您可能还需要给它一个宽度。

这将显示一个单元格在另一个单元格下面：

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

或者，正如@nux所指出的

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

---

这两种方法都应该足够了，尽管微软浏览器不会这样做，而且你可能需要专有的标记；同样，如果人们计划在手机上使用浏览器，他们不会购买microsoft手机，因此问题很小。

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

body, html {
    width: 100%;
}

查看此线程以了解更多信息：

---

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

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

如果您的表td有边框，您可能希望删除mobile中td border的第一列，以便第一列td内容看起来与mobile中的第二列td相同：

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

---

我认为大多数移动设备浏览器都可以使用表，但我倾向于避免使用它们，而是使用div或。只值我的两分钱。谢谢你的回答，我还用了display:block；不应该因为想象中的移动问题而回避表格。如果该表太宽，无法在移动设备中查看，请使用媒体查询重新格式化该表。似乎没有理由使用clear属性。块元素会自动占据其父元素的宽度。@cimmanon我同意，但我很快进行了测试，并且不得不将其插入浏览器，也许这根本不必要，但我没有花太多时间在某些客户端（例如android outlook应用程序）中测试td{display:block；}不起作用