关于 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

 

posted @ 2019-11-18 22:29  十步杀一人千里不留行  阅读(178)  评论(0编辑  收藏  举报