Question

我希望在某个屏幕尺寸（@media）下显示我的表格，如下所示：

默认表格视图：

（1 | 1）（1 | 2）（1 | 3）

（2 | 1）（2 | 2）（2 | 3）

（3 | 1）（3 | 2）（3 | 3）

我对小屏幕的看法：

（1 | 1）

（1 | 2）

（1 | 3）

（2 | 1）

（2 | 2）

（2 | 3）

（3 | 1）

（3 | 2）

（3 | 3）

你知道如何做到这一点吗？我希望行是水平对齐的。

Answer 1

传统的table无法做到这一点，但您可以使用<div。

.col {
  border: 1px solid #000000;
  display: inline-block;
  width: 80px;
}
@media (max-width: 400px) {
  .col {
    width: 100%;
  }
}

<div class="container">
  <div class="row">
    <div class="col">1.1</div><div class="col">1.2</div><div class="col">1.3</div>
  </div>
  <div class="row">
    <div class="col">2.1</div><div class="col">2.2</div><div class="col">2.3</div>
  </div>
  <div class="row">
    <div class="col">3.1</div><div class="col">3.2</div><div class="col">3.3</div>
  </div>
</div>

使用css3表还有另一种选择，但浏览器兼容性较差。

.table {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  border: 1px solid #000000;
  display: table-cell;
  width: 80px;
}
@media (max-width: 400px) {
  .table,
  .tr,
  .td {
    display: block;
  }
  .td {
    width: 100%;
  }
}

<div class="table">
  <div class="tr">
    <div class="td">1.1</div>
    <div class="td">1.2</div>
    <div class="td">1.3</div>
  </div>
  <div class="tr">
    <div class="td">2.1</div>
    <div class="td">2.2</div>
    <div class="td">2.3</div>
  </div>
  <div class="tr">
    <div class="td">3.1</div>
    <div class="td">3.2</div>
    <div class="td">3.3</div>
  </div>
</div>

Answer 2

您可以通过应用此CSS做您需要的事情
CSS

@media (max-width: 400px){ /*Example size*/
       tr {
          display: flex; 
          flex-direction: row;
          flex-wrap: wrap;
       }
}

示例代码
将浏览器置于窗口模式下以查看效果;）

table, th, td {
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   border-collapse: collapse;
}
table {
   width: 100%;
   padding: 10px;
}
th, td {
   padding: 10px;
   text-align: center;
}

@media (max-width: 500px){
  tr{
     display: flex; 
     flex-direction: row;
     flex-wrap: wrap;
  }
  th, td{
     width: 100%;
  }
}

<htlm>
   <head></head>
   <body>
      <table>
         <tr>
            <th><strong>(1|1)</strong></th><td>(1|2)</td><td>(1|3)</td>
         </tr>
         <tr>
            <th><strong>(2|1)</strong></th><td>(2|2)</td><td>(2|3)</td>
         </tr>
         <tr>
            <th><strong>(3|1)</strong></th><td>(3|2)</td><td>(3|3)</td>
         </tr>
      </table>
   </body>
</htlm>

响应式，水平表设计

2 个答案: