table基础学习-行列布局和滚动条隐藏

可视化类型页面制作心得----table

table 表格类型的数据

​ 要写可视化很少会少得了表格的参与，第一次写云子可视化的时候就直接用div堆了一个表格出来，效果不尽人意 …

一．表格元素总汇

表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅 助存在。

也是最常用的三个元素

元素名称	说明
table	表示表格
thead	表示标题行
tbody	表示表格主体
tfoot	表示表脚
tr	表示一行单元格
th	表示标题行单元格
td	表示单元格
col	表示一列
colgroup	表示一组列
caption	表示表格标题

二．构建表格解析

1. <table><tr><td> 构建基础表格

<table>
    <tr>   <td>张三</td>  <td>男</td>  td>未婚</td>   </tr>
    <tr>   <td>李四</td>  <td>女</td>  td>已婚</td>   </tr>
</table>

解释：<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个 border 属性， 设置为 1 即可显示边框。

2. <th>为表格添加单元格

<table border=1 style="width:300px;">
    
<tr>   <th>姓名</th>   <th>性别</th>   <th>婚姻</th>   </tr>

<tr>   <td>张三</td>   <td>男</td>   <td>未婚</td>   </tr>

<tr>   <td>李四</td>   <td>女</td>   <td>已婚</td>   </tr>

</table>

解释：<th>元素主要是添加标题行的单元格，实际作用就是将内部文字居中且加粗。这里使用了一个通用属性 style，主要用于 CSS 样式设置，以后会涉及到。```均属于单元格，包含两个合并属性：colspan、rowspan 等。

3. <thead>添加表头

<table border=1 style="width:300px;">
        <thead>
            <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>婚姻</th>
            </tr>
        </thead>
        
        <tr>   <td>张三</td>   <td>男</td>   <td>未婚</td>   </tr>
        
        <tr>   <td>李四</td>   <td>女</td>   <td>已婚</td>   </tr>
        
        </table>

解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它 的位置是不固定的，使用此元素可以限定在开头位置。

4.<tfoot>添加表脚

5.<tbody>添加表主体

6. <caption>1. 添加表格标题

这三条和第3点大致相同

<caption>这是一个人物表</caption>

解释：<caption>元素给表格添加一个标题。

以上就是基础

简易制作一个表格

制作这个表格，先看清行列数，和所占的空间是否固定

总体来说需要以下操作

<table>
        <tr>  <td></td>   <td></td>    <td></td>    <td></td>  </tr> 

        <tr>  <td></td>   <td></td>    <td></td>    <td></td>  </tr>

        <tr>  <td></td>   <td></td>    <td></td>    <td></td>  </tr>

        <tr>  <td></td>   <td></td>    <td></td>    <td></td>  </tr>

</table>    

如上的操作

此时加入数据的得到的效果不怎么理想

列宽不规则，相对比较拥挤。

我们需要将列宽行高调整好，如果表格的外部div宽度固定的话还需要加入滚动功能，但有滚动条又影响观看体验。接下来我们一步步进行。

1.设置列宽行高

行高可以简单的在 <tr>中加入height属性

列宽可以直接在<td>中加入 width属性

由于table的内定属性 表格中的元素会 自动上下居中，文字靠左。如果需要居中的话，可以直接在 <table>中加入 text-align: center;

2.滚动条

当存在滚动条时，我经常把表格的表头另外写在 <table></table>外，用l<li></li>或者其他方式写出来（因为后面要用滚动条时，会将表头也滚上去，看不见了，不符合要求）

如图把标题另外写出去渲染样式

如上 .report-list 是最外层盒子，要求表格内容写在该盒子内部，同时实现滚动功能和滚动条隐藏

此时我们在该盒子下创建 一个盒子 .table-container 用来形成滚动条，并在该盒子下 写入table

具体实现如下：

​ div.report-list — style: overflow: hidden;

​ div.table-contaner — style: overflow-y: scroll;

​ <table></table>

解释：

1. 在最外层盒子加入 overflow: hidden 属性，让超出该盒子的内容隐藏

​ 2.在table的上层目录加入 overflow-y: scroll; 属性，形成竖向或横向的滚动条

​ 3.要使 div.report-list 和 div.table-contaner 和 table 的大小相同。

​ 4.再调整 div.table-contaner 的大小（增加一个滚动条的宽度，），让滚动条超出上层盒子之外,使之隐藏，还能使用（滚动条会占用盒子的大小）

这样加入其他字体大小，背景的属性，就差不多做好了