带有 td 的响应式表格，它们相互放在一起

Question

我想让我的表响应式但我不知道如何使用媒体查询，有人可以帮助我吗？我的目标是让我的td行为像块一样，如果屏幕尺寸较小，则可以相互覆盖。

当前代码：

td{border:1px dotted red;background-color:red;color:white;}

p{font-family:'Varela Round';font-weight:bold;text-align:center;}

<table width="100%" cellpadding="0" cellspacing="5">
  <tbody>
    <tr>
      <td><p>SOCIETES</p></td>
      <td><p>CONTACT</p></td>
      <td><p>EMAIL NOMINATIF</p></td>
      <td><p>OPT OUT</p></td>
      <td><p>LIGNES DIRECTES/MOBILES</p></td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用移动优先方法的媒体查询将 td 从 display:block 更改为 display:table-cell 以最小宽度。

td{
  display:block;
  width:auto;
  border:1px dotted red;
  background-color:red;
  color:white;
  margin-bottom:10px;

}

@media only screen and (min-width: 70em) {
  td{
    display:table-cell;
    border:1px dotted red;
    background-color:red;
    color:white;
    margin-bottom:0px;
  }
}


p{font-family:'Varela Round';font-weight:bold;text-align:center;}

<table width="100%" cellpadding="0" cellspacing="5">
  <tbody>
    <tr>
      <td><p>SOCIETES</p></td>
      <td><p>CONTACT</p></td>
      <td><p>EMAIL NOMINATIF</p></td>
      <td><p>OPT OUT</p></td>
      <td><p>LIGNES DIRECTES/MOBILES</p></td>
    </tr>
  </tbody>
</table>