更改 VuetifyJS DataTable 单元格的默认宽度

Question

我正在使用 VuetifyJS 数据表，我需要将每个标题单元格的条目尽可能靠近彼此。我试图为每个标题添加一个 _宽度_，但这没有用 - 似乎有一个预定义的宽度不能低于。

更新：它应该是这样的 - 每行之间的边距应该固定在 10px：

这是一个 CodePen 示例。

  <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

如何让它们靠近在一起？

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以添加另一个空标题并将每列的 width 设置为最小值（1％），除了空以使其填充所有可用空间。您还需要在表格主体模板中添加空的 td 以使灰色行分隔符可见。

见codepen： https ://codepen.io/anon/pen/WKXwOR

原文由 Max Sinev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用标题设置宽度，如下所示

headers: [
  { text: 'Dessert (100g serving)', value: 'name', width: '20%'},
  { text: 'Calories', value: 'calories', width: '50%' },
  { text: 'Fat (g)', value: 'fat' },
  { text: 'Carbs (g)', value: 'carbs', width: '200px' },
],

原文由 Omar Makled 发布，翻译遵循 CC BY-SA 4.0 许可协议