html表格边框如何加粗 表格边框加粗技巧分享

这种方法最直接，但是如果表格多了，改起来就麻烦了。

内部样式表：集中管理型

在标签里加，把样式写在里面：

      table {      border: 2px solid black;      border-collapse: collapse; /* 这个很重要，让边框合并 */    }    th, td {      border: 2px solid black;      padding: 8px;    }  

这样改起来方便点，但是HTML和CSS还是混在一起。

外部样式表：最佳实践型

把CSS单独写在一个.css文件里，然后在HTML里引用：

style.css文件内容：

table {  border: 2px solid black;  border-collapse: collapse;}th, td {  border: 2px solid black;  padding: 8px;}

这种方法最规范，也最容易维护。

border-collapse: collapse;这个属性很重要，它可以让表格的边框合并成单线，不然可能会出现双线边框。

针对特定单元格加粗：灵活控制型

有时候你可能只想给某个单元格加粗边框，可以这样：

  
    
这个单元格边框加粗
    
普通单元格
  

或者用CSS类：

  .thick-border {    border: 3px solid red;  }
  
    
这个单元格边框加粗
    
普通单元格
  

如何让表格边框颜色更醒目？

除了加粗，颜色也很重要。直接改border属性的值就行，比如：

table {  border: 3px solid red; /* 红色边框 */}

或者用十六进制颜色码：

table {  border: 3px solid #FF0000; /* 也是红色边框 */}

表格边框样式除了实线还有哪些选择？

border-style属性可以控制边框的样式，除了solid（实线），还有：

dashed（虚线）dotted（点线）double（双线）groove（槽线）ridge（脊线）inset（内陷）outset（外凸）

举个例子：

table {  border: 3px dashed blue; /* 蓝色虚线边框 */}

这些样式可以组合使用，玩出很多花样。

如何解决表格边框在不同浏览器下的显示差异？

不同浏览器对CSS的解析可能有点不一样，表格边框也可能出现显示差异。为了解决这个问题，可以尝试：

使用CSS Reset：

引入一个CSS Reset文件，比如Normalize.css，它可以统一不同浏览器的默认样式。

添加浏览器前缀：

有些CSS属性需要添加浏览器前缀才能在所有浏览器上正常工作，比如-webkit-、-moz-、-ms-、-o-。不过现在大部分属性都不需要了。

针对特定浏览器hack：

如果实在不行，可以用CSS hack针对特定浏览器设置样式。不过这种方法不太推荐，因为hack可能会失效。

/* IE6 only */* html table {  border: 3px solid green;}/* IE7 only */*+html table {  border: 3px solid green;}

总的来说，用CSS Reset是最靠谱的方法。