HTML CSS 中表格的属性

HTML CSS 中表格的属性有哪些，我们来看看。

border 属性用来设置表格<table>、<tr>、<th>和 <td>的边框：

table, tr, th, td {
  border: 1px solid black;
}

注：<table> 、<tr>、<th> 和 <td> 元素都设置单独边框时，表格将拥有双边框效果。如果只想有外围边框，则可以只设置<table>边框效果。

border-collapse 属性可以设置将表格边框折叠合并为单一边框：

table {
  border-collapse: collapse;
}

width 和 height 属性分别设置表格的宽度和高度，可以设置固定值，也可以设置浏览器的百分比：

table {
  width: 100%;
}

td {
  height: 50px;
}

text-align 属性设置表格中内容的水平对齐方式（左、右或居中），和HTML中相同：

td {
  text-align: center;
}

vertical-align 属性设置表格中内容的垂直对齐方式（上、下或居中），和HTML中相同：

td {
  vertical-align: bottom;
}

padding 属性用于控制边框和表格内容之间的间距，可在 <td> 和 <th> 元素上使用：

th, td {
  padding: 15px;
}

border-bottom 属性设置水平分隔线，达到想要的表格样式：

th, td {
  border-bottom: 1px solid #ddd;
}

在 <tr> 元素上使用 :hover 选择器，达到鼠标悬停移动经过时表格某一行突出显示的效果：

tr:hover {background-color: #f5f5f5;}

实现斑马纹表格的效果，用到了 nth-child() 选择器，nth-child(even)（偶数）或 nth-child(odd)（奇数）为行 <tr> 添加 background-color：

tr:nth-child(even) {background-color: #f2f2f2;}

如果表格过大，可在表格外围添加<div>容器，并设置其 overflow-x:auto 的容器元素，可以实现表格滚动条显示，而非整个页面的滚动条。

<div style="overflow-x:auto;">
  <table>
    <tr>
      <td>www.zhuei.com</td>
    </tr>
  </table>
</div>

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！