Html 使桌子符合特定的设计

我是HTML的初学者

我试着做这张桌子，但没有得到准确的桌子（尤其是 每行后面的一行）。我只需要两行代码，其余的我可以自己编写

表格#待定{
表布局：固定；
单词包装：打断单词；
文本对齐：右对齐；
}

高级文书主任。
项目
HSN
数量
价格/项目
折扣/项目
应税价值
SGST
CGST
全部的
1.
喜马拉雅草本霜
印楝版
AFG41205
10sc。
150
10
150
20
20
1500
2.
喜马拉雅草本霜
印楝版
AFG41205
10sc。
150
10
150
20
20
1500
3.
喜马拉雅草本霜
印楝版
AFG41205
10sc。
150
10
150
20
20
1500
全部的

您可以使用以下方法在每个

tr

上设置

边框底部

和

边框顶部

：

table#tbl tbody tr {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

请注意，我没有在

thead

下设置

tr

元素的样式，这意味着不会在表的顶部创建边框。如果需要，可以将选择器替换为：

table#tbl tr

但是，您还需要在表上显示

边框折叠：collapse

，才能执行此操作

除此之外，我还在表中的

td

元素上添加了

padding:10px 0

。这将在表中每个单元格的顶部和底部应用10px的填充

最后，您可以在

thead

和

tfoot

元素上设置背景：

table#tbl thead,
table#tbl tfoot {
  background-color: #fffdf1;
}

请注意，

tbody

元素的结构在问题中有点不正确。具体来说，您用

而不是

关闭了

标记。所以，我也在下面的片段中修复了

您可以看到下面的代码段：

表格#待定{
表布局：固定；
单词包装：打断单词；
文本对齐：右对齐；
边界塌陷：塌陷；
}
表#tbl tbody tr{
边框顶部：1px纯色灰色；
边框底部：1px纯色灰色；
}
表#待定td{
填充：10px0；
垂直对齐：顶部；
}
表#待定，
表#tbl tfoot{
背景色：#fffdf1；
}

高级文书主任。
项目
HSN
数量
价格/项目
折扣/项目
应税价值
SGST
CGST
全部的
1.
喜马拉雅草本霜
印楝版
AFG41205
10sc。
150
10
150
20
20
1500
2.
喜马拉雅草本霜
印楝版
AFG41205
10sc。
150
10
150
20
20
1500
3.
喜马拉雅草本霜
印楝版
AFG41205
10sc。
150
10
150
20
20
1500
全部的

还有一个。如何在两行之间添加空格其中一种方法是通过填充。我已经在回答中提到了这一点。由于您是初学者，我将提到几件事：1-不要在代码中使用内联样式。它很难维护，并且使代码膨胀。2-在行/元素中使用类来帮助控制它们的样式。3-如果您有权查看您试图复制的原始表，请学习使用开发人员工具“检查”并查看他们在原始表中的操作方式-我在这方面学到了很多（好的和坏的！）