2
我一直在想辦法取一個標準表並創建一個固定列表，其中第一列固定，其餘滾動。我認爲有一些方法是有道理的，所以我會先從這一點開始。CSS：固定第一列表？ （僅限CSS！）
這對我來說很有意義的第一種方式是簡單地通過創建一個單獨的表的列，我們希望通過自身，這樣的事情打破了表的代碼格式：
<div class="table-container">
<div class="table-column">
<table>
<thead><tr><th> </th></tr></thead>
<tbody>
<tr><td>Side Header 1</td></tr>
<tr><td>Side Header 2</td></tr>
<tr><td>Side Header 3</td></tr>
<tr><td>Side Header 4</td></tr>
<tr><td>Side Header 5</td></tr>
<tr><td>Side Header 6</td></tr>
</tbody>
</table>
</div>
<div class="table-column" style="overflow-x: auto;">
<table>
<thead>
<tr><th>Top Header 1</th><th>Top Header 2</th></tr>
</thead>
<tbody>
<tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>
<tr><td>Row 2, Cell 1</td><td>Row 2, Cell 2</td></tr>
<tr><td>Row 3, Cell 1</td><td>Row 3, Cell 2</td></tr>
<tr><td>Row 4, Cell 1</td><td>Row 4, Cell 2</td></tr>
<tr><td>Row 5, Cell 1</td><td>Row 5, Cell 2</td></tr>
<tr><td>Row 6, Cell 1</td><td>Row 6, Cell 2</td></tr>
</tbody>
</table>
</div>
</div>
我們做第一列有空白區域的<th>，這樣整個表格的樣式仍然適合。
我真正想要做的事情是讓這更多的是一個動態的過程......顯然在這種情況下（特別是使用「動態」一詞），我可以使用一些JS，但必須有一種方法這在CSS中......但似乎沒有任何可靠的在線...所以我想我會放棄它。
我已經能來最接近的是通過使用data-attribute:;和td::before，像這樣：
<div class="box-table">
<table class="text-center hover stripes">
<thead>
<tr>
<th data-label="Cat 1">Cat 1</th>
<th>Cat 2</th>
<th>Cat 3</th>
<th>Cat 4</th>
<th>Cat 5</th>
<th>Cat 6</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Col 1">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
</tr>
<tr>
<td data-label="Col 1">Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
<td>Col 4</td>
<td>Col 5</td>
<td>Col 6</td>
</tr>
</tbody>
</table>
</div>
<style>
tr > th:first-child,
tr > td:first-child {
padding: 0;
}
tr > th:first-child::before,
tr > td:first-child::before {
content: attr(data-label);
display: inline-block;
position: fixed;
background: #fff;
border-right: 1px solid rgba(0,0,0,0.2);
letter-spacing: 1px;
padding: 0 0.75rem;
}
<style>
這裏是什麼我目前得到一個小提琴：https://jsfiddle.net/wn5nonu3/
有2個問題我遇到了：
- 第一是因爲我已經設置項目固定，如果表的溢出允許垂直滾動那麼fi xed顯然會留在他們固定的位置，並且與行不一致。
- 第二個問題是，我似乎無法風格
td::before（它似乎顯示「內聯」行爲，無論我將display:;值更改爲什麼？）。
第二個問題的潛在解決方法是刪除導致行更大的填充，將第一列設置爲固定寬度並將該寬度添加到td::before。儘管如此，我仍然無法解決第一個問題。
我以爲我會分享以防萬一任何人有任何關於這可能如何工作的想法，或者我所採用的路線是否真的可行？
的jsfiddle：https://jsfiddle.net/wn5nonu3/（同一個上面貼，只是爲了便於發現）
爲了記錄：我知道有一些偉大的JS選擇，我只是想限制腳本的數量我扔在我的網頁上，這似乎是有用的東西。
@AllDani嗨！我確實添加了一個jsfiddle，我會把它扔到最後，以便於查找。 – mattroberts33
旁註：邊框就是愛，邊框就是生活。你好，盒子兄弟。 –
@JacqueGoupil是的，你好！大聲笑 – mattroberts33