我需要在滚动时修复用作标题的表的位置。我试图实现数据表的功能，以便在数据单元宽度保持不变的情况下水平和垂直滚动。现在问题是每当我尝试修复我用于标题的表的位置时，它不会滚动水平滚动。我只想在垂直滚动时修复顶部标题表，但它应该水平滚动。
这是我用过的css
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;
}
这里有plunker完整的html和css。在这个plunker上，只需要将用于标题的表固定在顶部，同时垂直滚动
答案 0 :(得分：2)
最好的方法是使用javascript。你可以找到答案here
但你仍然想要使用纯CSS。我们需要一点点走动：
.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>
答案 1 :(得分：0)
我正致力于解决数据网格组件的类似问题。我使用flexbox来布局标题和单元格（作为行），然后将内容包装在可滚动的窗格中以进行所需的访问。
查看此codepen以查看其是否有效。 fyi - codepen实际上试图解决一个不同的问题，但它可能会给你一些想法，使用flexbox作为布局和可滚动内容的窗格。
<强> 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>