Dieser Artikel stellt hauptsächlich die Implementierung der Tabellen-Bildlaufleiste auf HTML-Seiten vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen Freunden teilen, die ihn benötigen.
Tabellen-Bildlaufleiste und Kopfzeile behoben
Es gibt viele Seiten, die aufgrund der großen Datenmenge horizontale und vertikale Bildlaufleisten erzeugen. Um die Anzeige für den Benutzer zu erleichtern, müssen wir den Zählerkopf korrigieren. Basierend auf dieser Anforderung wurde eine Demo geschrieben, um diese Funktion zu implementieren.
- Löst hauptsächlich mehrere Probleme:
- 1.Tabelle implementiert horizontale und vertikale Bildlaufleisten
- 2.Tabellenkopf korrigiert
- 3.Tabellenspaltenbreite anpassbar
- 4.Tabelleninhalt wird nicht umbrochen
Hauptcodeblock
css:
.table-scroll {
width: calc(100% - 5px);
overflow-x: scroll;
white-space: nowrap;
}
.table-scroll table {
table-layout: fixed;
width: calc(100% - 10px);
background-color:darkseagreen ;
}
.table-scroll thead {
display: table-row;
background-color: bisque;
}
.table-scroll tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
height: calc(100vh - 300px);
}
.table-scroll th,td {
width: 160px;
overflow: hidden;
text-overflow: ellipsis;
min-width: 160px;
border: 1px solid #808080;
}
h4, h5 {
color: cornflowerblue;
}Nach dem Login kopieren
js:
$(function() {
$('.table-scroll').scroll(function() {
$('.table-scroll table').width($('.table-scroll').width()
+ $('.table-scroll').scrollLeft());
});
var tableTdWidths = new Array();
var tableWidth = 0;
var tableTr0Width = 0;
var tableThNum = 0;
var tableTr1Width = 0;
tableWidth = $('.table-scroll table').css('width').replace('px','');
tableThNum = $('.table-scroll tr:eq(0)').children('th').length; if ($('.table-scroll tr').length == 1) { // header only if (tableWidth > tableTr0Width) {
$('.table-scroll tr:eq(0)').children('th').each(function(i){
$(this).width(parseInt(($(this).css('width').replace('px',''))
+ parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px');
});
}
} else { // header and body
tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px','');
$('.table-scroll tr:eq(1)').children('td').each(function(i){
tableTdWidths[i]=$(this).css('width').replace('px','');
});
$('.table-scroll tr:eq(0)').children('th').each(function(i) { if(parseInt($(this).css('width').replace('px', '')) >
parseInt(tableTdWidths[i])) {
tableTdWidths[i] = $(this).css('width').replace('px','');
}
}); if (tableWidth > tableTr1Width) {
//set all th td width
$('.table-scroll tr').each(function(i){
$(this).children().each(function(j){
$(this).css('min-width',(parseInt(tableTdWidths[j])
+ parseInt(Math.floor((tableWidth - tableTr1Width) /
tableThNum))) + 'px');
});
});
} else {
//method 1 : set all th td width
$('.table-scroll tr').each(function(i){
$(this).children().each(function(j){
$(this).css('min-width',tableTdWidths[j] + 'px');
});
});
}
}
});Nach dem Login kopieren
html:
<body>
<h4>完成效果：1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h4>
<p class="table-scroll">
<table>
<thead>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
<th>title1</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>2</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>3</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>4</td>
<td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>5</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>6</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>7</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>8</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>9</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>10</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>11</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>12</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>13</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>14</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>15</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>16</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>17</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>18</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>19</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>20</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>21</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>22</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>23</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>24</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>25</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>26</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>27</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>28</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>28</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>29</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
<tr>
<td>30</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
<td>body1</td>
</tr>
</tbody>
</table>
</p>
</body>Nach dem Login kopieren
Es gibt viele Beispiele im Internet , aber der erzielte Effekt ist nicht das, was ich wollte. Das Bild sieht nicht gut aus. Wenn es irgendwelche Probleme gibt, korrigieren Sie mich bitte.
Verwandte Empfehlungen:
HTML-Seite natives VIDEO-Tag versteckte Download-Button-Funktion
Ausführen, nachdem die HTML-Seite geladen wurde js Methode
Das obige ist der detaillierte Inhalt vonImplementierung einer Bildlaufleiste für HTML-Seitentabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
