垂直显示多个​​而不是减少​​宽度

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他的方式，你将只显示你的两个表中的一个基于你什么媒体查询