Bulma版bootstrap-table表格超出屏幕无法自适应缩小问题求助

开发者阿泽

2026-9-27

问题描述

注：我使用的是bootstrap-table库的Bulma版本。

我有一个包含大量信息的多列表格，当屏幕尺寸不足时，表格会变为可横向滚动状态，我期望让表格自动收缩，始终适配当前屏幕尺寸。目前我已配置移动端卡片适配模式，但该模式不适用于桌面端用户。我已尝试网上所有CSS及相关解决方案，但样式均被bootstrap-table默认规则覆盖无法生效，查阅官方文档及谷歌相关资料也未找到有效解决办法。

相关代码

<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">

<div class="wrapper is-desktop is-mobile">
  <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 width="30" data-width-unit="%" data-label="Instructors Difficulty">
      <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>

<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>

解决方案

1. 高优先级CSS覆盖默认规则

首先确保你自定义的CSS代码放在所有外部引入CSS（尤其是bootstrap-table-bulma.min.css）的后面加载，提升样式优先级，可直接使用以下样式：

/* 强制表格容器宽度适配父级 */
.bootstrap-table {
  width: 100% !important;
  overflow-x: hidden !important;
}
/* 固定表格布局，让列宽按配置比例分配，不会被内容撑开 */
.bootstrap-table table {
  table-layout: fixed !important;
  width: 100% !important;
}
/* 单元格内容自动折行，避免文本溢出撑宽列 */
.bootstrap-table table th,
.bootstrap-table table td {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal !important;
}
/* 针对长文本列限制最大宽度，可根据需求调整数值 */
.bootstrap-table table td[data-label="Title"],
.bootstrap-table table td[data-label="Attribute"] {
  max-width: 150px;
}
/* 进度条自适应列宽 */
.bootstrap-table .progress {
  width: 100% !important;
}
/* 缩小头像尺寸减少列宽占用 */
.bootstrap-table .instr-profile {
  max-width: 60px !important;
  max-height: 60px !important;
}

2. 调整表格配置参数

在现有table标签的属性基础上，新增/修改以下配置：

新增data-checkOnInit="true"属性，确保页面初始化时就自动触发宽度适配逻辑
给每个列的th标签添加data-width属性，按比例分配列宽，比如短内容列（CRN、学分、天数等）可以设为data-width="5%"，长内容列设为data-width="15%"，避免列宽自动被内容撑开
可选：给非高频使用的列（比如讲师难度、复购率等）添加data-visible="false"属性，默认隐藏，用户可通过顶部的列选择器按需开启展示

3. 内容优化适配

如果列数实在过多，可简化表头文本，比如将长英文表头替换为更短的中文表述，进一步减少表头的宽度占用。

内容的提问来源于stack exchange，提问作者Oze Botach

Bulma版bootstrap-table表格超出屏幕无法自适应缩小问题求助

1. 高优先级CSS覆盖默认规则 #

2. 调整表格配置参数 #

3. 内容优化适配 #

1. 高优先级CSS覆盖默认规则

2. 调整表格配置参数

3. 内容优化适配