Home > Article > Web Front-end > An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS
An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS
- 巴扎黑Original
- 2017-09-14 09:39:032299browse
This article mainly introduces you to the relevant information on how to use pure CSS to achieve table fixed columns and headers, and horizontal scrolling in the middle. The article introduces to you in detail the ideas and methods to achieve this effect through sample code. It has certain reference and learning value for everyone's study or work. Friends who need it can take a look below.
Preface
The background management system I am working on recently has to process a large number of tables, because the original project uses a for loop and concatenated strings. It was implemented in a way that resulted in a lot of js code; the nesting of various single quotes and double quotes was a headache; so vue.js was introduced; v-for was used for template rendering; the workload was suddenly reduced a lot, and I felt comfortable;
The text is forced to wrap.
Because some tables have a large number of columns, the text is squeezed together and wraps downwards; the scene is terrible to see. ;So the method of forced non-line wrapping is adopted
<style>
p{
white-space: nowrap;//强制不折行
}
</style>The new problem is that after forced line wrapping, the entire width exceeds the body
So we consider replacing the important columns of the table Fixed it; use the horizontal scroll bar to drag in the middle;
<style>
p{
white-space: nowrap;
overflow: hidden;//控制溢出隐藏
overflow-x: scroll;//设置横向滚动条
}
</style>Considering that the columns should be fixed, the table must be split; Then use float to restore the table; the following case is to split a table into three; then float it to restore it
Considering that it needs to be adaptive, it uses percentages to do it;
<style>
p{
width: 100%;
white-space: nowrap;
}
table td{
border: 1px solid #000;
}
.tab1{
width: 20%;
float: left;
}
.tab2{
width: 70%;
float: left;
overflow: hidden;
overflow-x: scroll;
}
.tab3{
width: 10%;
float: left;
}
</style>
<body>
<p>
<table class="tab1">
<thead>
<tr>
<th>首列</th>
</tr>
</thead>
<tbody>
<tr>
<td>首列</td>
</tr>
</tbody>
</table>
<table class="tab2">
<thead>
<tr>
<th>中间列</th>
</tr>
</thead>
<tbody>
<tr>
<td>中间列</td>
</tr>
</tbody>
</table>
<table class="tab3" >
<thead>
<tr>
<th>尾列</th>
</tr>
</thead>
<tbody>
<tr>
<td>尾列</td>
</tr>
</tbody>
</table>
</p>
</body>So the above case is completed
Another point is that the header of the middle table also needs to be fixed and cannot follow the amount below. tbody to slide; the idea I adopt here is to use positioning; since the above are all done with percentages; then the left value of positioning is also a percentage; I won’t go into the code here
The above is the detailed content of An example of how to implement horizontal scrolling between table fixed columns and table headers using pure CSS. For more information, please follow other related articles on the PHP Chinese website!