Question

我的桌子有些问题。

好吧，我的主意：在较小的屏幕上，表必须调整大小/缩放，但我想避免使用滚动条（原因是我没有使用表响应类）。

我只想要适合移动屏幕的自动调整大小的表格（例如在移动设备上缩小时）。这可以实现吗？

我正在使用bootstrap4，并且尝试了一些解决方案（媒体查询等），但是很不幸。

此刻，我的桌子只有1/2位于移动屏幕上，其余部分与屏幕重叠。

<section id="x" class="x">
  <div class="container">
    <table class="table borderless">
      <tr>
        <td valign=middle>
          <table border=0 cellpadding=0 cellspacing=0 align=center style="width: 100%;">
            <tr>
              <td colspan=3 align=center height=90 class="x1" valign=top>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td width=400 align=right valign=top>
                Lorem ipsum
              </td>
              <td width=45 align=center>
                Lorem ipsum
              </td>
              <td width=400 align=left valign=top>
                Lorem ipsum
              </td>
            </tr>
            <tr>
              <td align=right class=x2>
                Lorem Ipsum
              </td>
              <td width=45 align=center>
                Lorem Ipsum
              </td>
              <td align=left class=x2>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td align=right class=x2k>
                Lorem Ipsum
              </td>
              <td width=45 align=center>
                Lorem Ipsum
              </td>
              <td align=left class=x2>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td align=right class=x2>
                Lorem Ipsum
              </td>
              <td width=45 align=center>
                Lorem Ipsum
              </td>
              <td align=left class=x2>
                Lorem Ipsum
              </td>
            </tr>
            <tr>
              <td colspan=3 align=center valign=top>
                Lorem Ipsum
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</section>

和CSS：

.table th, .table td {
    border-top: none !important;
    padding: 0px !important;
    white-space: nowrap;
}

请随时提出任何想法或解决方案。谢谢。

如何在没有滚动条的情况下在较小的屏幕（Bootstrap4）上调整表格大小/缩放？

0 个答案: