将 B-Col 内的表格设为列的大小。 （Vue-Bootstrap）

Question

我的

Vue

组件中有这个

<b-modal ...>
  <b-row>
    <b-col sm="12">
      <table >
        <tr v-for=... :key="key">
          <td><strong>{{ key }}: </strong></td>
          <td>
            {{ item }}
          </td>
        </tr>
      </table>
    </b-col>
  </b-row>
....

如果一个项目很长，那么表格就比b-col大

如何强制表格与 b-col 大小相同。

我不想只躲起来

overflow: hidden;

因为桌子还是太大了，只是隐藏了。

Answer 1

如果没有你的CSS，很难知道，但你可以做到这一点的一种方法是将你的

table

设置为使用

table-layout: fixed

。

您可以获得精美且溢出的文本。像下面这样的东西会让你的表格单元看起来很漂亮：

td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}