我想構建一個具有固定寬度列的表格。表格數據在大多數情況下會在水平和垂直方向溢出。Excel像HTML表格在x軸（全表）和y軸（表頭固定）上可滾動
如果列的寬度大於視圖寬度，則需要水平滾動條來滾動並查看所有表列，同時滾動標題和數據。
如果數據的高度大於可用視圖，則會出現垂直滾動框，但滾動時會使標題保持固定，以便用戶留意列。
這是一個類似Microsoft Excel的行爲（僅供閱讀）。例如：
我已經看過幾篇文章，但他們只解決了水平滾動或垂直滾動。我需要一個解決方案，可以同時在兩種條件下工作。
Here is a FIDDLE我試圖讓工作，但即使是一個簡單的水平滾動使用overflow-x: auto不起作用。
幫助appreacited。我需要一個純HTML + CSS嵌入到ReactJS組件中。
顯然，這需要稍微調整才能使其完美無缺，但我假設您不會離開所有明亮的紅色邊框等等。爲了更好地展示效果，我冒昧地將列放大（force-width爲400px）。
本質上，有一個position:absolute;，它的top強制滾動到等於父div的scrollTop。
http://jsfiddle.net/d13d2fab/3/
document.querySelector('.ux-data-table').onscroll = function (e) {
// called when the window is scrolled.
var topOfDiv = Math.max(document.querySelector(".ux-data-table").scrollTop - 2, 0);
document.getElementsByTagName('thead')[0].style = "top:" + topOfDiv + "px;";
}.ux-data-table {
width: 100%;
height: 200px;
overflow: auto;
}
/* Prevents the header from overflowing the scrollbars */
.ux-data-table-inner {
position: relative;
}
.ux-data-table table {
width: 100%;
}
.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
background-color: red;
color: white;
border: 1px solid black;
width: 400px;
min-width: 400px;
}
.ux-data-table thead {
position: absolute;
}
.ux-data-table tbody {
margin-top: 20px;
display:block;
}
.ux-data-table td {
background-color: white;
color: red;
border: 1px solid black;
}<div class='ux-data-table'>
<div class='ux-data-table-inner'>
<table>
<thead>
<tr>
<th>#</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>CD player</td>
<td>Used</td>
<td>Sony</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>Variscope</td>
<td>Used</td>
<td>General</td>
</tr>
<tr>
<td>3</td>
<td>Item 3</td>
<td>Microphone</td>
<td>New</td>
<td>Mastersound</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
<tr>
<td>4</td>
<td>Item 4</td>
<td>Cable</td>
<td>New</td>
<td>Techable</td>
</tr>
</tbody>
</table>
</div>
</div>我喜歡移動標題的技巧，但如果整個表格內容在屏幕上水平放置，則會出現問題。試過寬度：'50px'和'min-width：50px'，它現在是400px，垂直滾動保持在屏幕的右側，而不是表格本身...... – Mendes
只需添加一個'float：left;'。我還在單元格列中添加了一個「max-width」：http://jsfiddle.net/d13d2fab/4/如果需要，您可以使用'clear：both'添加一個'div'，以便隨後的DOM不會包裝周圍。 – Jonathan
謝謝@Jonathan，但我仍然無法使它工作，因爲我所有的列都有固定的寬度，每列不同。爲了尊重寬度，我使用'table-layout：fixed'並且這是破壞性的東西....我在這裏輸了...幫助表示讚賞。 – Mendes
我不認爲這是可能的純HTML + CSS（不需要JavaScript）。如果我錯了，我很想糾正。你可以使用JavaScript（因爲你使用的是反應）？ – Jonathan
純JS好。無法支持jQuery。 – Mendes