Javascript 如何在vue.js中强制按钮保持在一行中？

我在一个表中有三个按钮，当行中的其他数据太长时，它会展开表，但三个按钮彼此重叠。我想强迫我的三个按钮保持在同一行，不管发生什么

<td class="text-xs-right">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</td>

编辑
删除
电子邮件

正常：

问题:

---

禁用对空白的换行：

.text xs右键{
空白：nowrap；
/*以帮助形象化容器太小的事实*/
宽度：10px；
边框：1px实心#ddd；
}

编辑
删除
电子邮件

将新类添加到表包装器

<td class="text-xs-right buttons-cell">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</td>

---

使用CSS为列指定最小宽度。

.buttons-cell {
   min-width: 150px;
}