Question

我有一个显示API内容的常规HTML表格。

<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';
}

Heres是你的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>

这样，您只会根据您的媒体查询显示两个表中的一个

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

2 个答案: