Hilfe bei der Programmierung, Antworten auf Fragen / Html / Wie man die Position des Tisches beim vertikalen Scrollen fixiert. Position auf y-Achse fixieren, aber scrollbar auf x-Achse - html, css, html5, css3, html-table

Wie man die Position des Tisches beim vertikalen Scrollen fixiert. Position auf y-Achse fixieren, aber scrollbar auf x-Achse - html, css, html5, css3, html-table

Ich muss die Position der Tabelle, die als verwendet wird, fixierenKopfzeile beim Scrollen. Ich habe versucht, die Funktionalität der Datentabelle zu erreichen, um horizontal und vertikal gescrollt zu werden, während seine Datenzellenbreite konstant bleibt. Jetzt ist das Problem, wenn ich versuche, die Position der Tabelle zu reparieren, die ich für die Überschrift benutzte, die es nicht scrollt horizontale Bildlaufleiste. Ich möchte nur die obere Header-Tabelle beim vertikalen Scrollen beheben, aber es sollte horizontal scrollen.

Dies ist das CSS, das ich dafür benutzt habe

table {
line-height: 3;
border-collapse: collapse;
min-width: 100%;
display: block;
}

table td span {
white-space: normal;
line-height: 1.2;
}

table th,
table td {
padding: 0 10px !important;
line-height: 1.2;
min-width: 175px;
max-width: 175px;
}

#table1 th:first-child {
padding-left: 5px;
}

table th {
background: #f9f9f9;
}

table .table-frame {
height: 300px;
overflow-y: scroll;
}

.scroll-table-holder {
overflow-x: auto;
white-space: nowrap;
max-height: calc(100vh - 350px);
}

.text-left{
text-align: left;
}

Hier ist die Plünderer mit komplettem HTML und CSS. Auf diesem Plunder braucht man nur den Tisch, der für den Header verwendet wird, um ihn vertikal zu scrollen

Antworten:

2 für die Antwort № 1

Der beste Weg ist Javascript. Sie können die Antwort finden Hier
Aber Sie wollen immer noch reines CSS verwenden. Wir müssen ein bisschen herumlaufen:

.scroll-container {
width: 300px;
height: 300px;
border: solid 1px #000;
overflow: auto;
}

.scroll-content {
width: 500px;
height: calc(100% - 50px);
overflow-y: auto;
}

td {
min-width: 100px;
height: 50px;
}

<div class="scroll-container">
<table>
<tr>
<td>Head1</td>
<td>Head2</td>
<td>Head3</td>
<td>Head4</td>
<td>Head5</td>
</tr>
</table>
<div class="scroll-content">
<table>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
</table>
</div>

</div>

0 für die Antwort № 2

Ich arbeite daran, ein ähnliches Problem für eine Datagrid-Komponente zu lösen. Ich habe flexbox verwendet, um die Header und Zellen (als Zeilen) zu gestalten und dann die Dinge in scrollbare Bereiche für den gewünschten Zugriff zu verpacken.

Schau dir das an Codepen um zu sehen, wie es funktioniert. fyi - der Codepen versucht tatsächlich, ein anderes Problem zu lösen, aber es könnte Ihnen einige Ideen geben, wie Sie flexbox für das Layout und die Bereiche für den scrollbaren Inhalt verwenden können.

SCSS

body {
padding: 25px;
}

p {
margin: 12px 0;
}

.datagrid-host {
border: 1px solid;

.datagrid-action-overflow {
border-bottom: 1px solid;
}

.datagrid-viewport {
display: flex;
flex-direction: row;
.datagrid-pinned-data {
flex: 0 0 auto;
width: 250px;
border-right: 1px solid;
display: flex;
// display: none;
flex-direction: column;
height: 200px;
.pinned-header {
flex: 0 0 auto;
background-color: #dcdcdc;
}
.pinned-data {
flex: 1 1 auto;
&.y-scrollable-pane {
flex: 1 1 auto;
position: relative;/* need this to position inner content */
overflow-y: auto;
}
}
}

.x-scrollable-pane {
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 200px; // sets the height of the datagrid
overflow-x: auto;

.datagrid-column-header {
flex: 0 0 auto;
background-color: #dcdcdc;
width: 1900px; // must be same width as .page-content
}

.y-scrollable-pane {
flex: 1 1 auto;
position: relative;/* need this to position inner content */
overflow-y: auto;
width: 1900px; // must be same width as .page-header
}
}
}

.datagrid-footer {
border-top: 1px solid;
}
}

.datagrid-row {
display: flex;

.datagrid-cell {
width: 10%;
}
}

HTML

<div class="datagrid-host">
<div class="datagrid-action-overflow">
<button>Action 1</button>
<button>Action 2</button>
<button>Action 3</button>
<button>Action 4</button></div>
<div class="datagrid-viewport">
<div class="datagrid-pinned-data">
<div class="x-scrollable-pane"> <!-- if we do more than one column pinnible this width needs to be dynamic, and scrollable? -->
<div class="datagrid-column-header">
<div class="datagrid-row">
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
</div>
</div>
<div class="y-scrollable-pane">
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
</div>
</div>
</div>
<div class="x-scrollable-pane">
<div class="datagrid-column-header">
<div class="datagrid-row">
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
<div class="datagrid-cell">Column</div>
</div>
</div>
<div class="y-scrollable-pane">
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
<div class="datagrid-row">
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
<div class="datagrid-cell">Cell</div>
</div>
</div>
</div></div>
<div class="datagrid-footer">Footer</div>
</div>

Wie man die Position des Tisches beim vertikalen Scrollen fixiert. Position auf y-Achse fixieren, aber scrollbar auf x-Achse - html, css, html5, css3, html-table

Antworten:

Verwandte Fragen