如何将原生表格滚动合并功能改写为长尾词？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1364个文字，预计阅读时间需要6分钟。
表格+我们在做管理系统的时候，经常使用表格展示数据。用了这么久的表格，你还记得原生表格是怎么写的吗？+表格标签的简单介绍+table：是整个表格的框架。rt：表示表格的行。表格中“
我们在做管理系统的时候。
经常使用表格展示数据。
用了这么久的表格，你还记得原生表格怎么写的嘛？
表格标签的简单介绍
table：是整个表格的框架。
rt:表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
td：单元格。
它是存放数据的标签。单元格的数据可以是文本、图片、列表、段落。
th: 是表格的表头。
<th> 其实是 <td> 单元格的一种变体.
本质上还是一种单元格。
<th> 一般位于第一行，充当每一列的标题。
大多数的浏览器会把表头显示为的文本。
tbody 是表格内容的
表格滚动
1.错误的做法,并不会产生滚动条的
<tbody class="tbodybox">
<tr class="trcss">
<td>学习语文</td>
</tr>
</tbody>
.tbodybox {
height: 200px;
overflow-y: auto;
}
正确的做法
.tbodybox {
max-height: 360px;
display: block;
overflow-y: overlay;
}
如果想要在tbody支持表格滚动的话，
tbody必须要设置为具有块级元素的特征。
这样滚动才会生效
th和td 需要设置display: inline-block;
这样元素样式才不会出现问题
否者的话，会有问题的哈。
但是这样会带来另外一个问题。
那就是表格在合并的时候合并的样式会出问题。
合并的时候不允许有table有相关属性display:xxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta c.xxx.net/</td>
<!-- <td>编程</td> -->
</tr>
<tr>
<td>百度</td>
<td>c.ccc.net/</td>
<td>搜索</td>
</tr>
<tr>
<td>腾讯</td>
<td>c.BBB.net/</td>
<td rowspan="2">搜索</td>
</tr>
<tr>
<td>字节跳动</td>
<td>c.ff.net/</td>
<!-- <td>搜索</td> -->
</tr>
</table>
</html>
td,table标签上是不可以有
display: inline-block;或者display: block;
或者说只要有 display:xxx;
表格的合都会并会失败
如果想要合并表格并且需要滚动怎么办呢？
这个时候就需要拆分了。
用一个div包裹表头(table>thead)和内容(table>tbody)
将滚动放置在table上
既可以合并表格又可以滚动
<style>
.tableheader {
border: 1px solid pink;
border-bottom: none;
}
table {
/* 去除间隙 */
border-collapse: collapse;
}
.table-table-cont {
display: inline-block;
max-height: 260px;
overflow-y: overlay;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
}
tbody tr {
/* 表格每一行的顶部表框 */
border-top: 1px solid pink;
}
table tr th,
table tbody tr td {
height: 40px;
line-height: 40px;
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-right: 1px solid pink;
}
.table-table-cont .trcss:nth-child(odd) {
background: palegoldenrod;
}
.table-table-cont .trcss:nth-child(even) {
background: palegreen;
}
</style>
<div>
<table class="tableheader">
<tr class="table-header-table">
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</table>
<table class="table-table-cont">
<tbody class="tbodybox">
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td colspan="4">学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
</tbody>
</div>
本文共计1364个文字，预计阅读时间需要6分钟。
表格+我们在做管理系统的时候，经常使用表格展示数据。用了这么久的表格，你还记得原生表格是怎么写的吗？+表格标签的简单介绍+table：是整个表格的框架。rt：表示表格的行。表格中“
我们在做管理系统的时候。
经常使用表格展示数据。
用了这么久的表格，你还记得原生表格怎么写的嘛？
表格标签的简单介绍
table：是整个表格的框架。
rt:表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
td：单元格。
它是存放数据的标签。单元格的数据可以是文本、图片、列表、段落。
th: 是表格的表头。
<th> 其实是 <td> 单元格的一种变体.
本质上还是一种单元格。
<th> 一般位于第一行，充当每一列的标题。
大多数的浏览器会把表头显示为的文本。
tbody 是表格内容的
表格滚动
1.错误的做法,并不会产生滚动条的
<tbody class="tbodybox">
<tr class="trcss">
<td>学习语文</td>
</tr>
</tbody>
.tbodybox {
height: 200px;
overflow-y: auto;
}
正确的做法
.tbodybox {
max-height: 360px;
display: block;
overflow-y: overlay;
}
如果想要在tbody支持表格滚动的话，
tbody必须要设置为具有块级元素的特征。
这样滚动才会生效
th和td 需要设置display: inline-block;
这样元素样式才不会出现问题
否者的话，会有问题的哈。
但是这样会带来另外一个问题。
那就是表格在合并的时候合并的样式会出问题。
合并的时候不允许有table有相关属性display:xxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta c.xxx.net/</td>
<!-- <td>编程</td> -->
</tr>
<tr>
<td>百度</td>
<td>c.ccc.net/</td>
<td>搜索</td>
</tr>
<tr>
<td>腾讯</td>
<td>c.BBB.net/</td>
<td rowspan="2">搜索</td>
</tr>
<tr>
<td>字节跳动</td>
<td>c.ff.net/</td>
<!-- <td>搜索</td> -->
</tr>
</table>
</html>
td,table标签上是不可以有
display: inline-block;或者display: block;
或者说只要有 display:xxx;
表格的合都会并会失败
如果想要合并表格并且需要滚动怎么办呢？
这个时候就需要拆分了。
用一个div包裹表头(table>thead)和内容(table>tbody)
将滚动放置在table上
既可以合并表格又可以滚动
<style>
.tableheader {
border: 1px solid pink;
border-bottom: none;
}
table {
/* 去除间隙 */
border-collapse: collapse;
}
.table-table-cont {
display: inline-block;
max-height: 260px;
overflow-y: overlay;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
}
tbody tr {
/* 表格每一行的顶部表框 */
border-top: 1px solid pink;
}
table tr th,
table tbody tr td {
height: 40px;
line-height: 40px;
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-right: 1px solid pink;
}
.table-table-cont .trcss:nth-child(odd) {
background: palegoldenrod;
}
.table-table-cont .trcss:nth-child(even) {
background: palegreen;
}
</style>
<div>
<table class="tableheader">
<tr class="table-header-table">
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</table>
<table class="table-table-cont">
<tbody class="tbodybox">
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td colspan="4">学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
<tr class="trcss">
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
<td>学习语文</td>
</tr>
</tbody>
</div>