如何创建带边框的全宽HTML表格？

当前HTML：

产品信息 产品名称： 名称 产品说明： 描述 简单地说：

桌子{ 边框折叠：折叠；/*如果不添加此行，将看到双边框*/ 边框：1px纯黑； } 表th， 表td{ 文本对齐：左对齐； 边框：1px纯黑； } 此处演示

希望对您有所帮助

部分{ 宽度：100wh； } 桌子{ 宽度：100% } 产品信息 产品名称： 名称 产品说明： 描述 桌子{ 边界塌陷：塌陷； /*如果不添加此行，您将看到双边框*/ 边框：1px纯黑； 宽度：100vw； } th{ 颜色：白色； 背景颜色：蓝色； } 运输署{ 背景色：白色； 宽度：70%； } td，th{ 边框：1px纯黑； } 产品信息 产品名称： 名称 产品说明： 描述

---

相当简单，在您的示例中，您只需将所需的背景颜色应用于表格标题单元格th，如下所示：

th{ 背景：深蓝色； 颜色：白色；/*假设您不想在深蓝色上显示黑色文本。*/ } 要使表格单元格周围的标准边框消失，只需折叠主表格元素上的边框，如下所示：

桌子{ 边界塌陷：塌陷； }

---

有了这一套，你现在可以在你的桌子上应用任何你想要的边框样式，任何厚度、颜色和样式

额外信息@Random COSMOS answer下的复制粘贴片段

表是块级元素

块级元素始终从新行开始并占用 全幅可用

将表的任何宽度设置为400px或30%=>100%（在您的情况下为其父表的100%）

要在CSS中指定表格边框，请使用border属性

table, th, td {
  border: 1px solid black;
}

主题外-可访问表

对于Web可访问性=>添加标题和数据单元格scope=row/scope=col之间的关系。 全文：

---

我同意以下观点：

表，th，td{ 边框：1px纯黑； } .产品信息>表格{ 宽度：100%； 表布局：固定； 边界塌陷：塌陷； 文本对齐：居中； } .产品信息tr>*：第一个孩子{ 背景：蓝色； 颜色：白色； 文本对齐：左对齐； } w-25{ 宽度：25%！重要； 最大宽度：25%！重要； } .文本中心{ 文本对齐：居中！重要； } 产品信息 产品名称： 名称 产品说明： 描述

---

另外，您的表是无效的HTML…Product Name:应该是Product Name:等等。@Paulie\u D为什么？左边是标题，右边是值

<table>
  <tr>
    <th scope="col" colspan="2">Product Infromation</th>
  </tr>
  <tr>
    <th scope="row">Product Name:</th>
    <td>Some Name</td>
  </tr>
  <tr>
    <th scope="row">Product Description:</th>
    <td>Some Description</td>
  </tr>
</table>