Vue-Bootstrap：如何让b-col内的表格与列宽保持一致？

要让表格严格贴合b-col的宽度，同时避免长内容撑爆容器，试试以下方案：

1. 添加自定义CSS样式 #

给表格设置强制宽度和固定布局，同时处理长文本换行：

.responsive-table {
  width: 100%; /* 强制继承父容器宽度 */
  table-layout: fixed; /* 列宽由容器分配，而非内容撑开 */
}

.responsive-table td:last-child {
  word-wrap: break-word; /* 长单词自动拆分换行 */
  white-space: pre-wrap; /* 保留空格且自动换行 */
}

2. 修改Vue组件中的表格代码 #

给表格加上自定义类名：

<b-modal ...>
  <b-row>
    <b-col sm="12">
      <table class="responsive-table">
        <tr v-for="(item, key) in yourData" :key="key">
          <td><strong>{{ key }}: </strong></td>
          <td>{{ item }}</td>
        </tr>
      </table>
    </b-col>
  </b-row>
  <!-- 其他模态框内容 -->
</b-modal>

可选：精细控制列宽 #

如果需要给第一列（键名列）固定宽度，避免被挤压，可补充CSS：

.responsive-table td:first-child {
  width: 140px; /* 根据实际需求调整 */
}

这样设置后，表格会完全适配b-col的宽度，长内容会自动换行展示，既不会超出容器，也不会隐藏内容。

内容的提问来源于stack exchange，提问作者Marko Zadravec