HTML表格边框怎么显示_HTML表格border属性及CSS边框设置

哎哟喂，你这表格边框的说明也太详细了吧，看得我头都大了...不过确实该说说这个事儿。

上周有个客人问我为啥他做的表格边框老是双线的，我一看代码，哎哟那还用说，直接用的border属性没加CSS啊。
你想想，那玩意儿内联写，改一个表格全改，简直要命！
你要是老老实实用CSS控制，那方便多了。
我一般都会这样弄：
css table { width: 1 00%; border-collapse: collapse; border: 1 px solid ddd; } td, th { border: 1 px solid ddd; padding: 1 2 px; text-align: left; } th { background-color: f2 f2 f2 ; }
你看这样写，结构清晰，哪儿改哪儿，不用翻遍整个页面找那个border="1 "。
而且border-collapse: collapse这玩意儿特别重要，不然默认双线真的烦死人，尤其是单元格挨着的部分。
我上次在某个项目里就因为这个踩坑，调试了半天才发现是忘了加这一行。

最烦的是那些样式冲突，有时候明明写了CSS，边框还是不见，一查说是被内联的style="border:0"给盖了。
这时候就得看看选择器优先级了，别轻易用!important，那玩意儿用多了代码都看不懂。

要说最佳实践，我肯定建议你全部用CSS，别碰border属性。
结构与样式分离，这道理都懂，但做起来有时候还是混着来，特别是赶时间的时候...哎反正你看着办吧。

我现在还在想那个响应式设计怎么搞，小屏幕手机上表格怎么显示才好看，这个我得再琢磨琢磨。

这就是坑，别信这种自动生成代码的脚本，2 01 9 年我接了一个项目，结果代码质量极差，全是错误。

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

直接说：要在HTML表格里实现单线边框，用CSS，border-collapse: collapse，然后对table, th, td分别设置边框。
记得合并边框，用border-style玩花样，比如实线、虚线。
精细化？单独调整边框方向，比如只加底部边框。
用伪类突出关键列行。
最后，别用HTML的border属性，响应式设计不行，边框不合并也乱。
记住调整padding，看效果。