html表格取消内部竖线的五个步骤，实例在线

表格取消内部竖线的五个步骤

如果只是想取消表格内部的竖线，则只需下方的前两个步骤，如果需要对表格进行进一步的美化，则可以继续设置其它的步骤：

不要设置table元素的border属性；
只设置tr表格行的border-bottom属性
将table元素的width设置为100%；
将单元格内的内容设置为水平居中显示；
间隔设置表格行的background-color属性，表格行可以更清晰；

表格取消内部竖线实例代码，及在线编辑器

<table id='t1'>
  <tr><th>A</th><th>B</th><th>C</th></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>e</td><td>f</td><td>g</td></tr>
  <tr><td>h</td><td>i</td><td>j</td></tr>
  <tr><td>k</td><td>l</td><td>m</td></tr>
</table>

<style>
  #t1{width:100%;height:200px;}
  #t1 tr{border-bottom:1px solid skyblue;text-align:center;}
  #t1 th{text-align:center;}
  #t1 tr:nth-child(odd){background-color:skyblue;}
  #t1 tr:hover{background-color:orange;}
</style>

提示

关于HTML表格样式更多的设置，可参考：CSS 表格系列。

hot：热门