响应式引导表？答案

【问题标题】：Responsive BootStrap-Table?响应式引导表？
【发布时间】：2021-11-10 20:33:36
【问题描述】：

我正在使用 https://bootstrap-table.com 特别是 Bulma 样式表版本（与常规引导样式表不同！）来制作我的表格。从视频中可以看出，表格没有响应，相反，当表格在屏幕上溢出时，它就变成了可滚动的。有什么想法吗？

代码如下，但请注意！该代码依赖于 Flask (python) 将 var 的表传递给它。

或codepenhttps://codepen.io/OOUZI/pen/XWaBRxN

<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/themes/bulma/bootstrap-table-bulma.min.css">
    {% include 'js_html/table-extensions-css.html' %}
<body>
{% include 'topbar.html' %}
{% include 'js_html/quickview.html' %}
<style>
body {
  font-family: 'Roboto', Arial, sans-serif;
}

.wrapper {
  width: 100%;
  max-width: 110.25rem;
  margin: 2rem auto;
  white-space: normal;
}

.instructor {
  width: 100px;
  word-wrap: break-word;
}

.label {
  font-size: .725rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: +1.3px;
  margin-bottom: 1rem;
}

.searchBar {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#searchQueryInput {
  width: 100%;
  height: 2.8rem;
  background: #f5f5f5;
  outline: none;
  border: none;
  border-radius: 1.625rem;
  padding: 0 3.5rem 0 1.5rem;
  font-size: 1rem;
}

#searchQuerySubmit {
  width: 3.5rem;
  height: 2.8rem;
  margin-left: -3.5rem;
  background: none;
  border: none;
  outline: none;
}

#searchQuerySubmit:hover {
  cursor: pointer;
}
</style>
<style>
@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.pageloader{bottom:0;left:0;position:absolute;right:0;top:0}.pageloader{position:fixed;padding-top:2em;background:#00d1b2;background:#00d1b2;z-index:999998;transition:transform .35s ease-out,-webkit-transform .35s ease-out;will-change:transform}.pageloader.is-white{background-color:#fff;background:#fff}.pageloader.is-white::after{border-color:#0a0a0a;-webkit-animation:loader-figure-white 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-white 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-white .title{color:#0a0a0a}.pageloader.is-black{background-color:#0a0a0a;background:#0a0a0a}.pageloader.is-black::after{border-color:#fff;-webkit-animation:loader-figure-black 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-black 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-black .title{color:#fff}.pageloader.is-light{background-color:#f5f5f5;background:#f5f5f5}.pageloader.is-light::after{border-color:#363636;-webkit-animation:loader-figure-light 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-light 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-light .title{color:#363636}.pageloader.is-dark{background-color:#363636;background:#363636}.pageloader.is-dark::after{border-color:#f5f5f5;-webkit-animation:loader-figure-dark 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-dark 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-dark .title{color:#f5f5f5}.pageloader.is-primary{background-color:#00d1b2;background:#00d1b2}.pageloader.is-primary::after{border-color:#fff;-webkit-animation:loader-figure-primary 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-primary 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-primary .title{color:#fff}.pageloader.is-link{background-color:#3273dc;background:#3273dc}.pageloader.is-link::after{border-color:#fff;-webkit-animation:loader-figure-link 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-link 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-link .title{color:#fff}.pageloader.is-info{background-color:#209cee;background:#209cee}.pageloader.is-info::after{border-color:#fff;-webkit-animation:loader-figure-info 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-info 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-info .title{color:#fff}.pageloader.is-success{background-color:#23d160;background:#23d160}.pageloader.is-success::after{border-color:#fff;-webkit-animation:loader-figure-success 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-success 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-success .title{color:#fff}.pageloader.is-warning{background-color:#ffdd57;background:#ffdd57}.pageloader.is-warning::after{border-color:rgba(0,0,0,.7);-webkit-animation:loader-figure-warning 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-warning 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-warning .title{color:rgba(0,0,0,.7)}.pageloader.is-danger{background-color:#ff3860;background:#ff3860}.pageloader.is-danger::after{border-color:#fff;-webkit-animation:loader-figure-danger 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-danger 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-danger .title{color:#fff}.pageloader:not(.is-bottom-to-top){-webkit-transform:translateY(-100%);transform:translateY(-100%)}.pageloader.is-bottom-to-top{-webkit-transform:translateY(100%);transform:translateY(100%)}.pageloader.is-left-to-right{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pageloader.is-right-to-left{-webkit-transform:translateX(100%);transform:translateX(100%)}.pageloader.is-active:not(.is-left-to-right),.pageloader.is-active:not(.is-right-to-left){-webkit-transform:translateY(0);transform:translateY(0)}.pageloader.is-active.is-left-to-right,.pageloader.is-active.is-right-to-left{-webkit-transform:translateX(0);transform:translateX(0)}.pageloader::after{position:absolute;top:50%;left:50%;display:block;border-radius:100%;content:'';z-index:9999;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:0;box-sizing:border-box;border:0 solid #fff;-webkit-animation:loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader .title{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:2em 0 0 0;font-size:.875em;letter-spacing:.1em;line-height:1.5em;color:#fff;white-space:nowrap}@-webkit-keyframes loader-figure{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-white{0%{height:0;width:0;background-color:#0a0a0a}29%{background-color:#0a0a0a}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-white{0%{height:0;width:0;background-color:#0a0a0a}29%{background-color:#0a0a0a}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-black{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-black{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-light{0%{height:0;width:0;background-color:#363636}29%{background-color:#363636}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-light{0%{height:0;width:0;background-color:#363636}29%{background-color:#363636}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-dark{0%{height:0;width:0;background-color:#f5f5f5}29%{background-color:#f5f5f5}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-dark{0%{height:0;width:0;background-color:#f5f5f5}29%{background-color:#f5f5f5}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-primary{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-primary{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-link{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-link{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-info{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-info{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-success{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-success{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-warning{0%{height:0;width:0;background-color:rgba(0,0,0,.7)}29%{background-color:rgba(0,0,0,.7)}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-warning{0%{height:0;width:0;background-color:rgba(0,0,0,.7)}29%{background-color:rgba(0,0,0,.7)}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-danger{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-danger{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}
</style>
<div onload="function()" class="pageloader is-active is-link is-bottom-to-top"><span class="title">Pageloader</span></div>
<script>
setTimeout(function () {
    document.getElementById('pageloader').style.display = 'none'
    document.getElementById('pageloader').style.display = 'none';
}, 2000)
<script>
<div class="wrapper">
  <table data-show-columns-toggle-all="true" classes="table-sm" data-sortable="true" data-filter-control="true" class="is-narrow table-responsive" data-toggle="table" data-search-highlight="true" data-advanced-search="true" data-show-columns="true" data-show-fullscreen="true" data-id-table="advancedTable" data-mobile-responsive="true" data-sticky-header="true" data-pagination="true" data-search="true">
    <thead>
    <tr>
      <th data-sortable="false" searchable="false">Favorite</th>
      <th data-sortable="false" searchable="false">Image</th>
      <th data-field="CRN" data-sortable="true" searchable="true">CRN</th>
      <th data-field="Subject" data-sortable="true" searchable="true">Subject</th>
      <th data-field="Course" data-sortable="true" searchable="true">Course</th>
      <th data-field="Credits" data-sortable="true" searchable="true" >Credits</th>
      <th data-field="Title" data-sortable="true" searchable="true">Title</th>
      <th data-field="Days" data-sortable="true" searchable="true">Days</th>
      <th data-field="Times" data-sortable="true" searchable="true" >Times</th>
      <th data-field="Instructors" data-sortable="true" searchable="true">Instructor</th>
      <th data-field="Attribute" data-sortable="true" searchable="true">Attribute</th>
      <th data-field="InstructorDiff" data-sortable="true" searchable="true">Instructors Difficulty</th>
      <th data-field="InstructorRating" data-sortable="true" searchable="true">Instructors Rating</th>
      <th data-field="WouldTakeAgain" data-sortable="true" searchable="true">Would Take Again</th>
      <th data-field="Comments" data-sortable="false" searchable="false">Comments</th>
    </tr>
    </thead>
    <tbody>
  {% for course in courses %}
    <tr>
    <th scope="favorite_course">
    <form action="/favorite_courses/api/add_course/{{course.id}}" method="post">
        <button class="button is-success" name="foo" value="upvote">+</button>
    </form>
    </th>
    
    {% if instructors[course.instr]['image'] == None or instructors[course.instr]['image'] == "" %}
      <div class="image">
      </div>
    <td class="is-image-cell">
      <div class="image">
        <img src="https://www.yu.edu/sites/default/files/default_images/Placeholder_0.png" style="max-height:100px;width:100px;" class="is-rounded instr-profile">
      </div>
      </td>
    {% else %}
        <div class="image">
        </div>
      <td class="is-image-cell">
        <div class="image">
          <img src="{{instructors[course.instr]['image']}}" class="is-rounded instr-profile" style="max-height:100px;width:100px;">
        </div>
        </td>
    {% endif %}
      <td data-label="CRN">{{course.crn}}</td>
      <td data-label="Subject">{{course.subj}}</td>
      <td data-label="Course">{{course.crse}}</td>
      <td data-label="Credits">{{course.cred}}</td>
      <td class="instructor" data-label="Title">{{course.title}}</td>
      <td data-label="Days">{{course.days}}</td>
      <td data-label="Times">{{course.time}}</td>
      <td data-label="Instructor">{{course.instr}}</td>
      <td data-label="Attribute">{{course.attribute}}</td>
      
      <td data-width="10" data-width-unit="%" data-label="Instructors Difficulty" class="is-progress-cell">
      <div class="columns">
        <div class="column">
          <p class="bd-notification is-info"><center>{{instructors[course.instr]['profDiff']}}%</center></p>
          <div class="columns is-mobile">
            <div class="column">
              {% if instructors[course.instr]['profDiff'] | int >= 75 %}
              <progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td>
              {% elif instructors[course.instr]['profDiff'] | int >= 50 %}
              <progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td>
              {% else %}
              <progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td>
              {% endif %}
          </div>
        </div>
      </div>
      </div>
      </td>

      <td data-label="Instructors Rating" class="is-progress-cell">
      <div class="columns">
      <div class="column">
        <p class="bd-notification is-info"><center>{{instructors[course.instr]['profRating']}}%</center></p>
        <div class="columns is-mobile">
          <div class="column">
          {% if instructors[course.instr]['profRating'] | int >= 75 %}
          <progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td>
          {% elif instructors[course.instr]['profRating'] | int>= 50 %}
          <progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td>
          {% else %}
          <progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td>
          {% endif %}
          </div>
        </div>
      </div>
      </div>
      </td>
      
      <td data-label="Would Take Again" class="is-progress-cell">
      <div class="columns">
      <div class="column">
        <p class="bd-notification is-info"><center>{{instructors[course.instr]['profWouldTakeAgain']}}%</center></p>
        <div class="columns is-mobile">
          <div class="column">
            {% if instructors[course.instr]['profWouldTakeAgain'] | int >= 75 %}
            <progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress>
            {% elif instructors[course.instr]['profWouldTakeAgain'] | int >= 50 %}
            <progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress>
            {% else %}
            <progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress>
            {% endif %}
          </div>
        </div>
      </div>
      </div>
      </td>
    <!-- {% include 'course_list/comments.html' %}  -->
    {% endfor %}
    </tr>
    </tbody>
  </table>
  </div>
  </div>
  <script>
  
  </script>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/themes/bulma/bootstrap-table-bulma.min.js"></script>
{% include 'js_html/table-extensions-js.html' %}
{% include 'footer.html' %}
</body>
</html>

【问题讨论】：

您可以将代码上传到 codepen 或 jsfiddle 以重现该问题吗？所以我们可以有能力编辑代码。例如，排除 python 并仅添加带有 1 行静态数据的 HTML、CSS、JS 只是为了查看无响应的行为。 :)
完成后在这里再次发表评论，给我一些！很合理哈哈。
如果你想使用 bootstrap，Datatables 提供了一个 Bootstrap 设计的响应式表格！
@Tadas codepen.io/OOUZI/pen/XWaBRxN 那里
@BeerusDev 我真的很喜欢/想使用引导表。不过，我很感谢您的建议！

标签： javascript html css bootstrap-table bulma

【解决方案1】：

现在我明白你的问题了。 Look at this page。这是 Boostrap Table 框架的默认行为。当您超过一定数量的列时，它会启用水平滚动条。而我之前多次看到的 - 这是正常行为。

看，当你只留下前 11 个单元格时 - 滚动条隐藏：

可能的解决方法：

使用我用来隐藏上方列的相同设置按钮，并创建默认配置，该页面仅加载最重要的列，直到它响应为止。
减少填充、减小字体大小、图像大小等
如果此表将被多个回访者广泛使用 - 使用 Javascript localStorage 并为每个用户在第一步中使用该按钮选择隐藏/显示的内容进行默认配置。只需添加功能以记住每个用户想要查看的内容，并在他再次访问时为他显示相同的列。

希望我对您有所帮助，但在这种情况下您无能为力，因为它是一张桌子。您不能使用 CSS 并强制 Column 像 DIV 元素通常那样分成另一行，它对于表格来说看起来很糟糕......

更新：

添加此 CSS 将使您的表格响应 1920x.... 屏幕：

.bootstrap-table .fixed-table-container .table thead th .th-inner {
   padding: 0.15em;
   font-size: 11px;
}

.button, .file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea  {
   font-size: 0.7rem;
}

.table.is-narrow td, .table.is-narrow th {
   padding: 0.25em 0.3em;
}

.bootstrap-table .fixed-table-container .table td {
   font-size: 13px;
}

P.S - 最好去掉至少 1-3 列。

更新 2：

顺便说一句，您最后的列将只是带有进度条的百分比值。您可以：

减小进度条和评论标签的最大宽度；或
您可以围绕百分比值制作圆形进度条。

【讨论】：

有没有办法只减小元素的整体大小？所以它更小，但很合适。
我会尝试调整它的大小并编辑我的原始答案。 :)
@OzeBotach 看看。设法通过一些调整使其响应。很少玩，你可以让它对 XL 和 LG 屏幕做出响应，对于 MD/XS 屏幕，你需要让它带有水平滚动条。如果这回答了您最初的问题 - 不要忘记将此答案标记为“已回答”。总是乐于助人。 :)
嗯，我真的很感激这个添加，但它似乎缩小了测试，而不是浪费空间的行本身。此外，它看起来非常尴尬。我并不是说听起来不欣赏，只是不是最理想的方式。我会看看我是否可以解决这个问题来解决一些问题。
我什么都试过了，Bulma 由于某种原因不允许缩小进度条：/