响应式自定义 div 表答案

【问题标题】：Responsive custom div table响应式自定义 div 表
【发布时间】：2019-08-09 10:01:14
【问题描述】：

我必须制作 div 表，因为我没有看到使用引导表元素的方法。

这是图片：

代码如下：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
      <div class="col-12">
        <p class="text-white"><b>Lorem ipsum</b></p>
      </div>
    </div>
    <div class="row border-left border-right text-center">
      <div class="col-8 pt-3 pb-0 border-right">
        <p>Lorem ipsum</p>
      </div>
      <div class="col-4 pt-3 pb-0">
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="row border text-center">
      <div class="col-10">
        <div class="row">
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
          <div class="col pt-3 pb-0 border-right">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
          </div>
        </div>
        <div class="row border-top">
          <div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
            <p class="text-white"><b>Lorem ipsum</b></p>
            <p class="text-white">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            </p>
          </div>
          <div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
        </div>
        <div class="row border-top">
          <div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
          <div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
            <p class="text-white"><b>Lorem ipsum</b></p>
            <p class="text-white">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            </p>
          </div>
        </div>
      </div>
      <div class="col-2 pt-3">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        </p>
      </div>
    </div>

现在我希望它能够响应。水平滚动，或任何其他方式，任何建议将不胜感激

【问题讨论】：

欢迎来到 Stackoverflow。请参阅How do I ask a good question? 我建议您发布更多详细信息，说明到目前为止您如何尝试解决您面临的问题。我们是来帮助你的，但不是简单地为你完成整个任务而没有自己尝试，因为你不会那样学习。
尝试将其全部包装在 div 中并添加 style="overflow-x:auto;"到那个div，也可以用table标签来做
我还刚刚在您的 sn-p 中添加了 boostrap 作为 外部资源，以便 Bootstrap 加载。您还可以将 CSS 添加到此以使其成为 1:1复制屏幕上的内容。还请避免在 sn-p 中添加您的代码可以轻松演示的图片，因为假设在 2 年的时间里，当用户针对同一问题来此帖子时，该图片可能不再存在......这已涵盖在我在第一条评论中发布的链接中。

标签： html css html-table bootstrap-4 responsive

【解决方案1】：

bootstrap 中的 col 类会将行划分为您添加的 col 元素的数量。为了使其响应式地为每个屏幕类型指定元素的宽度，使用 col-sm-12 等类（在小型设备上为全宽）， col-md-6（中等屏幕的两列网格）等别忘了，bootstrap 是移动优先的。

【讨论】：