关于 table 那些事儿

 

一.  table thead/tbody/tfoot 组合写法：

table: 表格；

thead: 表头；

tbody: 标签表格主体（正文）；

tr：行；

th：表头单元格

td：单元格；

tbody: 包含行的内容下载完优先显示，不必等待表格结束。另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就"从头到脚"显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

示例 如下：

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

 

 

二.  table border 设置方式：

第一种方法：

1、将table的属性设置为：BORDER=0 、cellspacing=1 ；

2、设置table的背景色为即你要设置的table的边框颜色；

3、设置所有td背景色为#ffffff白色；

这样，就大功告成了。

第二种方法：

1、设置BORDER=0 ；

2、再通过CSS，给Table加上1px的border-top,border-left；

3、然后再设置所有的td的border-right,border-bottom；

不妨试试哦

第三种方法：

1、设置table的CSS为{border-collapse:collapse;border:none;}

2、再设置td的CSS为{border:solid #000 1px;}

大功告成！而且Word也能认出这种设置。

我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。

如下：

 

三：tbody 增加滚动条

 需求：tbody 的高度固定，当内容垂直高度超出 tbody 时，内容垂直滚动。

方式：
       tbody : {

　　　display: block;

　　　height: 200px;

　　　overflow-y: scroll;

       }

　　 thead, tbody tr {

　　　　display: table;

　　　　width: 100%;

　　　　table-layout: fixed;

　　}

示例 如下：

table tbody {
    display:block;
    height:200px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch; // 为了滚动顺畅 
}

table tbody::-webkit-scrollbar {
    display: none; // 隐藏滚动条
}

table thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

table thead {
    width: calc( 100% - 1em )
}
table thead th{ background:#ccc;}

 

摘自：
https://www.cnblogs.com/JimShi/p/11213134.html
http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html

https://blog.csdn.net/m0_37852904/article/details/79355865