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>
解释：
- 在最外层盒子加入 overflow: hidden 属性，让超出该盒子的内容隐藏
2.在table的上层目录加入 overflow-y: scroll; 属性，形成竖向或横向的滚动条
3.要使 div.report-list 和 div.table-contaner 和 table 的大小相同。
4.再调整 div.table-contaner 的大小（增加一个滚动条的宽度，），让滚动条超出上层盒子之外,使之隐藏，还能使用（滚动条会占用盒子的大小）
这样加入其他字体大小，背景的属性，就差不多做好了
table基础学习-行列布局和滚动条隐藏相关推荐
- CSS基础学习--17 布局 - 水平 垂直对齐
一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
- CSS基础学习十七：CSS布局之定位
在我们开始学习CSS布局之前,先来了解一下文档流的概念.文档流即是HTML的布局机制,块级元素占一行, 行内元素不占一行.将窗体自上而下分成一行行,并在每行中按从左往右的顺序排放元素. 一CSS定位和 ...
- HTML基础学习记录
HTML基础学习记录 一.HTML的学习 1.网页的组成 2.HTML是什么 2.HTML特点 3.HTML基本结构 4.HTML标签语法 (1)< html >标签 (2)< he ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
- html基础-几种布局
1.html标签 html为网页标记语言 <标签名> DTD声名 新版 <!DOCTYPE html> 标题标签 hn <h1></h1> <h2 ...
- Excel基础学习（2013及以上版本）
Excel基础学习(2013及以上版本) (教学视频点这里) 文章目录 Excel基础学习(2013及以上版本) (一) 快速录入 1) 切换单元格 2) 爬取网页上的表格 3) 清洗爬取的数据 (二 ...
- Linux基础学习(Ubuntu)
Linux非常基础的知识学习和总结 内容参考: 1.man page: 2.鸟哥的Linux私房菜-基础学习篇. 本文章PDF版(我懒得在这上面排版了.都是为了学习,请支持原创): 链接: 百度云盘 ...
- Python-Excel 零基础学习xlwings，看这篇文章就够了
零基础学习xlwings,看这篇文章就够了 | 一起大数据-技术文章心得 (17bigdata.com) 1.xlwings是什么 2.xlwings安装更新与卸载 3.xlwings详细使用 4.案 ...
最新文章
- 嵌入式开发笔记-存储控制器
- java 4d_GitHub - wm3445/Java-concurrency at 4d10ae51a9deec37340fc40d03f205cfbe8de43b
- Python爬虫入门（1）：综述
- html 值追加,从JSON中读取数据追加到HTML中
- W3C专业术语翻译对照表
- Java基础---标志符、变量和数据类型
- 重读博弈论（八）---海萨尼转换与贝叶斯法则
- VirtualBox安装MAC时，只有光驱(Sierra Custom Installer)没有硬盘怎么办
- 《移动应用开发技术——Android》课程报告-个人记账系统
- 页面开机自启动，页面置顶显示，页面持续获得焦点，鼠标点击器源码
- 视觉SLAM十四讲中P61作业7。
- 无尽的生命 洛谷p2448
- AirTag被不法分子滥用为恶意追踪工具？苹果：即将更新解决
- swagger-ui导出word接口文档
- 《软件功能测试自动化实战教程》—第6章6.5节使用环境变量的参数化
- ExoPlayer记录学习
- 万信金融 -项目介绍 day01
- thinkphp5 ajax分页
- 亚马逊：了不起的中国卖家，搞定亚马逊关联买家秀视频爆单
- 联想笔记本合盖不睡眠