引导表响应溢出-x 不起作用答案

【问题标题】：Bootstrap table responsive overflow-x doesn't work引导表响应溢出-x 不起作用
【发布时间】：2023-03-20 17:48:01
【问题描述】：

我尝试在我的项目中制作自定义引导表但是当我在移动显示中尝试我的代码时。但是，“表格”总是将其宽度除以其内容中数据的 100%。我想要的是在显示器很小的时候创建一个'table overflow-x'

  <div class="my-table table-responsive">
    <table class="table my-dark-tb" style="overflow: hidden;">
      <thead class="my-thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">First Data</th>
          <th scope="col">Second Data</th>
          <th scope="col">Address</th>
          <th scope="col">Phone</th>
          <th scope="col">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td> Lorem ipsum dolor sit amet consectetur. </td>
          <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consectetur autem quis.</td>
          <td>London</td>
          <td>981638027901</td>
          <td class="my-table-action">
            <a href="#view" class="action-button view">
              <span>Detail</span>
            </a>
            <a href="#edit" class="action-button edit">
              <span>Edit</span>
            </a>
            <a href="#delete" class="action-button delete" data-toggle="modal" data-target="#delete">
              <span>Delete</span>
            </a>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>The quick, brown fox jumps over a lazy dog</td>
          <td>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog</td>
          <td>Tokyo</td>
          <td>62926281012</td>
          <td class="my-table-action">
            <a href="#view" class="action-button view">
              <span>Detail</span>
            </a>
            <a href="#edit" class="action-button edit">
              <span>Edit</span>
            </a>
            <a href="#delete" class="action-button delete" data-toggle="modal" data-target="#delete">
              <span>Delete</span>
            </a>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Far far away, behind the word mountains</td>
          <td>far from the countries Vokalia and Consonantia,</td>
          <td>Berlin</td>
          <td>1214123145112</td>
          <td class="my-table-action">
            <a href="#view" class="action-button view">
              <span>Detail</span>
            </a>
            <a href="#edit" class="action-button edit">
              <span>Edit</span>
            </a>
            <a href="#delete" class="action-button delete" data-toggle="modal" data-target="#delete">
              <span>Delete</span>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

结果合适，但宽度最多为 576 像素

当宽度

如果'表'中有很多数据就会成为问题

【问题讨论】：

标签： html css bootstrap-4 css-tables

【解决方案1】：

添加表min-width

.my-dark-tb{
  min-width:1000px;
}

https://jsfiddle.net/lalji1051/m3p80x2e/1/

【讨论】：