即使使用 .table-responsive .table，引导表也不响应答案

【问题标题】：bootstrap table not responsive even with .table-responsive .table即使使用 .table-responsive .table，引导表也不响应
【发布时间】：2021-09-30 11:44:20
【问题描述】：

这是我的引导表的代码，一切都很好，但是当我切换到移动设备时，它没有添加水平滚动，我已经在 .table 类的元素外部添加了表格响应类，但它仍然不适用于移动设备设备

<div class="table-responsive table-area">
      <table class="table table-striped table-dark bordered-table">
        <thead>
            <tr>
              <th scope="col">✔️</th>
              <th scope="col">Questions</th>
              <th scope="col">❤️</th>
            </tr>
        </thead>
        
        <tbody>

        <% allLists.forEach(item=>{ %>

              <tr>
                <th scope="row"> <input class="form-check-input checkbox-solved" type="checkbox" value="" id="flexCheckDefault"> </th>
                <td> <a href="<%= item.url %>"><%= item.name %></a> </td>
                <td> <input class="form-check-input checkbox-favourite" type="checkbox" value="" id="flexCheckDefault"> </td>
              </tr>

        <% }) %>
        </tbody>
      </table>
    </div>

在移动视图中，甚至没有显示绿色刻度表列

这是表格css代码


.table-area {
  margin-top: 50px;
  max-width: 1000px;
}

.table-area table {
  text-align: center;
}

table a{
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  font-size: 1.1rem;
  color: #fff;
}

table a:hover {
  color: goldenrod;
}

我认为 max-width 引起了问题，但我也尝试将其删除，但仍然无法正常工作。

有人可以帮我处理这段代码吗？

【问题讨论】：

尝试add overflow-x: scroll;到表的父元素。
它添加了滚动，但是当我切换到移动设备时，滚动消失了，它保持原样
你的第四个问题是没有空格，它不会换行。
如果没有其他代码，就很难分辨。尝试在浏览器中使用开发者工具[F12]，切换到手机图标或调整窗口大小，找到小于表格的父元素，然后将其css更改为overflow-x: scroll;
好吧，兄弟，我刚刚发现有一个外部 div 包含所有这些，我设置为 flex 以在我移除滚动条后立即将这些项目水平和垂直居中对齐，但它会破坏页面（左对齐内容）

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

正如您从图像中看到的，您的第四个问题文本没有任何空格，因此它没有换行。通常，当您期望这么长的字符串没有空格时，我们需要设置宽度以便强制换行。在您的情况下，您可能需要响应式网页设计 - 媒体查询

这是固定宽度的包装示例。但是，您可以组合媒体查询以在各种设备上实现所需的结果

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        width: 135px;
        word-wrap: break-word;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>

【讨论】：