减少 vuetify 中数据表的标题宽度

Question

我正在使用 Veutify 的 Datatable。无论表格的标题如何，我都想减小表格的每一列的宽度。有什么可能的解决方案？

visit <https://codepen.io/anon/pen/LdQgYx>

Answer 1

在您的headers 中指定一个最小的width 成员：

     {text: "Title", value: "title", align: "left", width: "1px"},

表格会尝试使内容变宽，但它受到表格内容和标题内容宽度的限制。它将确保它可以显示它们。

表头的white-space 设置为no-wrap。您可以通过覆盖它来缩小“持续时间，分钟”列：

.elevation-1 thead tr th {
  white-space: normal;
}

您可以通过允许单词在字母之间中断来让事情变得更难看：

.elevation-1 thead tr th {
  white-space: normal;
  word-break: break-all;
}

最后，虽然我很确定您不想这样做，但您可以将th 的display 设置为inline-block，标题将按照您指定的大小调整，但会显示独立于它们的列。

.elevation-1 thead tr th {
  display: inline-block;
  white-space: normal;
}