引导数据库表响应溢出-x不起作用

Question

我试图在我的项目中创建自定义引导表，但当我在移动显示中尝试我的代码时。然而，“表”总是将其宽度除以其内容中数据的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>

结果是合适的，但宽度仅为576px

​

当宽度小于576px时，表格始终采用100%的页面内容(不是溢出x)

​

如果'table‘中有很多数据，那就成了问题。

Answer 1

添加表min-width

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

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