如何为现有HTML表格设置全宽样式与单元格边框？

嘿，我来帮你搞定这个表格样式的问题！你现在的CSS只给表格加了外层边框，想要实现全宽+单元格带边框的效果，只需要调整几个CSS属性就行，我一步步给你拆解：

1. 实现表格全宽 #

给表格添加 width: 100%; 属性，让它自动撑满父容器（也就是.Product-Info这个section）的宽度。

2. 实现完整的边框效果 #

你遇到的问题是默认表格的单元格边框和外层边框是分开的，需要用 border-collapse: collapse; 来合并边框，然后给表头(th)和单元格(td)都加上边框，这样就能形成完整的网格样式了。

完整的CSS代码 #

/* 针对.Product-Info下的表格设置样式，避免影响其他表格 */
.Product-Info table {
  width: 100%; /* 全宽效果 */
  border-collapse: collapse; /* 合并边框，消除单元格间隙 */
  border: 1px solid black; /* 表格外层边框 */
}

/* 给表头和单元格添加边框 */
.Product-Info th, .Product-Info td {
  border: 1px solid black;
  padding: 8px; /* 可选：添加内边距，让内容不挤在边框里 */
  text-align: left; /* 可选：让单元格文本左对齐，默认表头是居中的 */
}

/* 让跨两列的主表头居中显示 */
.Product-Info th[colspan="2"] {
  text-align: center;
}

效果说明 #

• border-collapse: collapse 是核心：它会把表格的外层边框和单元格边框合并成一个连续的边框，不会出现默认的双边框间隙。
• 给th和td都设置边框后，整个表格的每一行每一列都会有清晰的分隔线。
• 加入padding和文本对齐是为了让表格内容看起来更美观，你可以根据自己的需求调整数值。

内容的提问来源于stack exchange，提问作者Digestiv