Ayuda en la programación, respuestas a preguntas / Html / Cómo arreglar la posición de la mesa mientras se desplaza verticalmente. Fije la posición en el eje y, pero puede desplazarse en el eje x - html, css, html5, css3, html-table

Cómo arreglar la posición de la mesa mientras se desplaza verticalmente. posición fija en el eje y pero capaz de desplazarse en el eje x - html, css, html5, css3, html-table

Necesito fijar la posición de la mesa utilizada comoencabezado mientras se desplaza. Intenté lograr la funcionalidad de la tabla de datos para desplazarse horizontal y verticalmente mientras que el ancho de las celdas de datos permanece constante. Ahora, el problema es que cada vez que intento corregir la posición de la tabla que usé para el encabezado no se desplaza con desplazamiento horizontal. Solo quiero arreglar la tabla del encabezado superior mientras se desplaza verticalmente, pero debería desplazarse horizontalmente.

Este es el css que he usado para ello.

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;
}

Aquí esta la plunker Con html completo y css. En este plunker solo necesita que la tabla utilizada para el encabezado se fije en la parte superior mientras se desplaza verticalmente

Respuestas

2 para la respuesta № 1

La mejor manera es usando javascript. Puedes encontrar la respuesta aquí
Pero todavía quieres usar CSS puro. Necesitamos un poco de caminar alrededor

.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 para la respuesta № 2

Estoy trabajando para resolver un problema similar para un componente de red de datos. Utilicé flexbox para diseñar los encabezados y las celdas (como filas) y luego envolví los elementos en paneles desplazables para el acceso deseado.

Mira esto codepen para verlo funcionando. fyi: el codepen en realidad está tratando de resolver un problema diferente, pero podría darle algunas ideas para usar flexbox para el diseño y paneles para el contenido desplazable.

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>