移动设备上具有最大宽度的响应表答案

【问题标题】：Responsive table on mobile with max widths移动设备上具有最大宽度的响应表
【发布时间】：2021-07-29 07:05:52
【问题描述】：

此表结构存在问题。在移动设备上，如果它们是两列那么没关系，但有时客户可能想要最多 5 个。所以在移动设备上我正在寻找一个 x-scroll 系统。我得到了这个工作，但如果内容是多个句子，则无法保持 ' 的最小/最大宽度。如果3-4+列，可能每行只有2-3个小字，不好看。

因此，在移动设备上，目标是保持此列不只是 33%（如果是 3 列）、25%（如果是 4 列）等等。希望，在移动设备上，如果超过 3 列，则每列至少有 40% ......例如。稍微扩展一下列，这样所有内容都不会被压缩，但会在某个 % 后换行，并且用户可以滚动 x 以查看其余内容。

.wp-block-table {
  width: 100%;
}

table {
  overflow-x: scroll;
}

td,
th,
tr {
  padding: 16px 24px;
  font-size: 16px;
  line-height: 1.5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

tr {
  height: 52px;
}

tr:first-child {
  background-color: blue;
  height: 56px;
  color: #fff;
  font-weight: 700;
}


}

<figure class="wp-block-table">
  <table>
    <tbody>
      <tr>
        <td>quam id</td>
        <td>iaculis eu</td>
        <td>quis</td>
      </tr>
      <tr>
        <td>Smartly hulk pirate avast mutiny jury mast mizzen doubloon Brethren of the Coast aft.Draught loaded to the gunwalls shrouds Spanish Main deadlights jury mast jib come about crow’s nest long boat.</td>
        <td>Sapien et ligula ullamcorper malesuada. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique.&nbsp;</td>
        <td>Jib scurvy bilged on her anchor ballast Arr topgallant gaff Yellow Jack stern long clothes.</td>
      </tr>
      <tr>
        <td>&nbsp;Egestas fringilla phasellus faucibus scelerisque eleifend donec.&nbsp;</td>
        <td>Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque.&nbsp;</td>
        <td>Fire ship Sink me hardtack hearties league lass Privateer Nelsons folly broadside rum.&nbsp;</td>
      </tr>
      <tr>
        <td>Fire ship Sink me hardtack hearties league lass Privateer Nelsons folly broadside rum.&nbsp;</td>
        <td>Consectetur lorem donec massa sapien faucibus. Ac tortor dignissim convallis aenean et. <br>Fusce id velit ut tortor. Enim nec dui nunc mattis enim ut.</td>
        <td>Handsomely log cable mutiny pirate doubloon nipperkin bilge rat overhaul yard.</td>
      </tr>
      <tr>
        <td>Ac turpis egestas integer eget aliquet. Ut sem viverra aliquet eget sit.&nbsp;</td>
        <td>Ut sem viverra aliquet eget sit. Sapien et ligula ullamcorper malesuada.</td>
        <td>Smartly hulk pirate avast mutiny jury mast mizzen doubloon Brethren of the Coast aft. <br>Draught loaded to the gunwalls shrouds Spanish Main deadlights jury mast jib come about crow’s nest long boat.</td>
      </tr>
    </tbody>
  </table>
</figure>

【问题讨论】：

标签： html css

【解决方案1】：

用 px 而不是父元素的百分比来确定表格单元格内宽度的最佳和最简单的方法。

只需将以下代码添加到您的 CSS 中

td{
  min-width: 300px;
}

【讨论】：