7
在我正在建設的網站上，只會顯示一個表格。無論屏幕的寬度/高度如何，我都希望桌子堅持屏幕的邊緣。帶粘性/固定頭的水平和垂直響應表？
此表還需要粘/固定標題（所以當他們向下滾動時，標題仍然可見），我發現複雜的事情，因爲寬度和高度似乎需要手動設置。
另外，它需要能夠水平滾動以防萬一有很多列。我不希望它們全都是10px寬，但是當尺寸改變時，桌子本身仍然需要堅持到屏幕的邊緣。
它可以在用戶滾動時保持標題粘性，但元素的寬度和高度必須全部手動設置，這意味着它不會響應任何內容。
這可能嗎？我並不反對JavaScript，但純粹的CSS解決方案會略爲優先。
（JSFiddle）
body {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 375px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 105px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple/Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
請[編輯]與更多的信息。僅有代碼的答案[不鼓勵]（http://meta.stackexchange.com/questions/196187），因爲它們不包含可搜索內容，也不解釋爲什麼有人應該「嘗試這個」。我們在這裏努力成爲知識的資源。 – Mogsdad
我認爲讓桌子響應並不是這裏的要點。這很容易。但製作標題水平親屬和垂直固定是很難的。 –