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

Question

我正在使用Veutify的Datatable。无论表格的标题如何，我都希望减少表格的每个列的宽度。什么是可能的解决方案？

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

Answer 1

在width中指定最小headers成员：

     {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;
}

最后，虽然我很确定您不想这样做，但您可以将display的{​​{1}}设置为th，并将标题设置为您指定，但将独立显示其列。

inline-block