垂直顯示多個​​而不是減少​​寬度

Question

我有一個常規的HTML表格顯示來自API的內容。

<table style="width:100%"> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

我的頁面響應很快。

當屏幕寬度減少，所以內容不符合寬度，是否有可能，與CSS，使<td>行事<tr>？所以用上面的代碼我想顯示6個垂直對齊的<td>？

Answer 1

是的，你可以通過使用display:block和width:100% OD <td>

table tr td { 
 
    display: block; 
 
    width:100%; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    <td>c</td> 
 
    </tr> 
 
</table>

做，如果你想在2列：

table tr { 
 
    display: inline-block; 
 
    width:50%; 
 
    float: left; 
 
} 
 
table tr td { 
 
    display: block; 
 
    width:100%; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    <td>c</td> 
 
    </tr> 
 
</table>

Answer 2

做到這一點可能是以下一種方法：

在基本顯示

.fullTable{ 
display:'block'; 
} 
.singleLineTable{ 
display:'none'; 
} 

，並與其他顯示器上的媒體查詢：

.fullTable{ 
display:'none'; 
} 
.singleLineTable{ 
display:'block'; 
} 

繼承人是你的HTML，但它可能會使DOM過載一點：

<table style="width:100%" class='fullTable'> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 
<table style="width:100%" class='singleLineTable'> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
</table> 

T他的方式，你將只顯示你的兩個表中的一個基於你什麼媒體查詢