您想要使用的是媒体查询，它允许您根据屏幕/设备的大小选择内容在屏幕上的位置和方式。
看看这些以供进一步参考：
https://www.w3schools.com/css/css3_mediaqueries.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

如果可能的话，您可以考虑使用CSS网格作为创建响应表的一种方式
https://developer.mozilla.org/en-US/docs/Web/CSS/grid

如果你的数据最好显示在一个表中，那么你就会知道你有多少列，并且会对它们之间的相对宽度有所了解。您还将决定在一个非常窄的设备上发生什么-是将单元格全部压缩到一次可以看到整行，还是用户在单元格中水平滚动，如果事情不适合可用屏幕？为了解决这个问题，您可能需要为表本身或其容器设置一个最小宽度。
一旦完成，你就可以使用CSS相对于表格的整体宽度来设置每个单元格的样式。在最简单的情况下，如果你想让它们的宽度都相同，你可以给予它们每个容器宽度的x%，其中x* 列数= 100。
否则，您可以使用CSS选择器，如td：nth-child（1）{width：10%;} td：nth-child（2）{width：15%;}等等。
单元格高度也是如此-您可能希望根据行号的不同而有所不同。
就这样继续下去，但是使用CSS而不是不受欢迎的特定于表的属性，你有很大的灵活性，例如哪些行和列获得什么填充或颜色或边框以及它们的基本尺寸。
如果保留所有维度（除了最大和最小表宽），则可能不需要使用媒体查询。

在我的例子中，我给了你一个自适应table的例子。自适应射击在800px宽度。希望对你有帮助。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  overflow: hidden;
}

thead {
  background-color: #E5E5E5;
}

tr:nth-child(even) {
  background-color: #F2F2F2;
}

th,
td {
  padding: 15px;
  text-align: center;
}

@media(max-width: 800px) {
  table {
    border: 0;
  }
  thead {
    display: none;
  }
  tr {
    display: block;
    margin: 0 0 20px 0;
  }
  td {
    display: block;
    text-align: right;
  }
  td:before {
    content: attr(aria-label);
    float: left;
    font-weight: bold;
  }
  td:last-child {
    border-bottom: 0;
  }
  tr:nth-child(odd) {
    background-color: #F2F2F2;
  }
  tr:nth-child(even) {
    background-color: #FFFFFF;
    border-width: 3px 0 3px 0;
    border-style: solid;
    border-color: #E5E5E5;
  }
}

<table>
  <thead>
    <tr>
      <th scope="col">filed 1</th>
      <th scope="col">filed 2</th>
      <th scope="col">filed 3</th>
      <th scope="col">filed 4</th>
      <th scope="col">filed 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row" aria-label="filed 1">simple text 1</td>
      <td aria-label="filed 2">simple text 2</td>
      <td aria-label="filed 3">simple text 3</td>
      <td aria-label="filed 4">simple text 4</td>
      <td aria-label="filed 5">simple text 5</td>
    </tr>
    <tr>
      <td scope="row" aria-label="filed 1">simple text 1</td>
      <td aria-label="filed 2">simple text 2</td>
      <td aria-label="filed 3">simple text 3</td>
      <td aria-label="filed 4">simple text 4</td>
      <td aria-label="filed 5">simple text 5</td>
    </tr>
    <tr>
      <td scope="row" aria-label="filed 1">simple text 1</td>
      <td aria-label="filed 2">simple text 2</td>
      <td aria-label="filed 3">simple text 3</td>
      <td aria-label="filed 4">simple text 4</td>
      <td aria-label="filed 5">simple text 5</td>
    </tr>
    <tr>
      <td scope="row" aria-label="filed 1">simple text 1</td>
      <td aria-label="filed 2">simple text 2</td>
      <td aria-label="filed 3">simple text 3</td>
      <td aria-label="filed 4">simple text 4</td>
      <td aria-label="filed 5">simple text 5</td>
    </tr>
    <tr>
      <td scope="row" aria-label="filed 1">simple text 1</td>
      <td aria-label="filed 2">simple text 2</td>
      <td aria-label="filed 3">simple text 3</td>
      <td aria-label="filed 4">simple text 4</td>
      <td aria-label="filed 5">simple text 5</td>
    </tr>
  </tbody>
</table>