HTML中的表格边框怎么设置？ 表格边框样式调整技巧

直接用 CSS 控制边框是最干净的方式。

表，第 td { 边框：1 px实线ccc； 边界折叠折叠；
时间{ 底部边框：2 px 实心 3 3 3 ；
tr：最后一个孩子 td { 底部边框：2 px 实心 3 3 3 ；
th：第一个孩子，td：第一个孩子{ 右边框：2 px实心a0a0a0；
使用 border-collapse: Collapse 解决多边框问题。

HTML表格边框怎么设置_HTML表格border属性调整样式

记得上次帮同事调试表格边框时，他急得满头大汗。
表格明明边框很细，但是单元格之间却有重叠的双线，看着特别不舒服。
我告诉他他可能忘了添加 border-collapse:collapse;。
他试了试，那身影顿时变得清晰起来。

实际上，边框设置既复杂又简单。
就像做菜一样，如果调料不对，即使食材再好，食材也出不来。
例如，如果直接在表格中添加border="1 "，则默认是粗边框，并且单元格之间有双线，使得整个表格看起来非常笨重。
这时候就得用border-collapse来简化复杂性，将相邻的边框合二为一。

最搞笑的是，有时候即使 border: none; 设置后，表格的边框仍然可见。
这是因为浏览器默认为表格添加边框！ 因此，要么使用 border-collapse:collapse； 如前所述，完全合并边界； 或者简单地添加边框：无； table 和 td 都可以，不需要边框。

昨天我遇到了一个陷阱，添加了 border: 2 px Solid red; 到表头。
结果，细胞也变成红色。
后来发现表格头和单元格用的是同一个类，CSS样式没有区分。
因此，在制作表格时，最好将表头（th）和数据单元格（td）的边框样式分开编写。
例如，表头使用粗红色边框，单元格使用灰色细边框，这样差异一目了然。

还有一个细节，不要使用鲜艳的颜色作为边框。
上次我尝试使用亮蓝色边框时，在浅色背景下看它会让我的眼睛感到疼痛。
后来换成了深灰色，整个造型立马显得专业了八百倍。

等一下，我刚刚看了完整的例子。
它实际上使用 tr:nth-child(even) 来更改偶数行的背景颜色。
这是一个相当不错的技巧，眼睛看久了数据也不会累。
但是，如果表格特别长，这种技术会影响加载速度吗？
现在想想，边框设置就像穿衣服一样。
桌子是主体，边框是衣架，收边是调整衣架的夹子，使衣服（细胞）不互相挤压。
不同的边框样式（实线、虚线、点线）就像衣服的颜色和图案一样，你必须根据场合来选择。

我突然想到，如果表里嵌套了子表，边框会不会更乱？ 一定要尝试一下。