我想以列行形式顯示表格中的資料。我正在嘗試這樣做是為了移動兼容性。我怎樣才能做到這一點？我瀏覽了幾個執行緒，但找不到表格的示例。
該表簡單如下：
table, th, td {
border:1px solid black;
}
@media screen and (max-width: 768px) {
}<!DOCTYPE html>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>
uj5u.com熱心網友回復：
感覺有點不滿意，因為您需要專門針對每一列的 CSS，所以您需要知道您的表格可能具有的最大列數，但您可以對每一列應用 flex order 來實作您的愿望。像這樣：
table, th, td {
border: 1px solid black;
}
th {
text-align: left;
}
@media screen and (max-width: 768px) {
tbody {
display: flex;
flex-direction: column;
}
tr {
display: contents;
}
tr>:nth-child(1) {
order: 1;
}
tr>:nth-child(2) {
order: 2;
}
tr>:nth-child(3) {
order: 3;
}
tr>:nth-child(4) {
order: 4;
}
tr>:nth-child(5) {
order: 5;
}
tr>:nth-child(6) {
order: 6;
}
tr>:nth-child(7) {
order: 7;
}
}<table style="width:100%">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>uj5u.com熱心網友回復：
我無法理解你的問題。我認為您是在問當設備檢測到移動設備或螢屏寬度小于 768 像素時如何將列更改為行，并且列標題跟隨在每一行的行中。那是對的嗎？
如果是這種情況，請嘗試將列的顯示更改為 flex。
@media screen and (max-width: 768px) { table tbody>tr>td {
display: flex !important; }}
至于列標題，當檢測到小螢屏時先隱藏它
@media screen and (max-width: 768px) { table tbody>tr>th:nth-of-type(1)~th {
display: none !important; }}
然后使用 javascript 為每個列行克隆列標題，然后附加到當前列行內。通過對每列使用回圈來獲取索引當前列，使用當前索引列克隆列標題，然后附加它。
我知道這聽起來很復雜，但這是我知道如何實作的唯一方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328505.html
下一篇：影像溢位flex專案