更改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

---

你说 width 不起作用是什么意思？它应该是字符串，例如 width:"10%" 或 width:"10"。 - Traxo

Answer 1

您可以像下面这样使用标题来设置宽度

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

---

这是直截了当的答案。 - JXLai

我觉得使用页眉插槽时，可能会出现问题。 - Akash NO

喜欢这个答案。 - leojail

Answer 2

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

请参阅 codepen：https://codepen.io/anon/pen/WKXwOR

- Max Sinev

---

谢谢，但是每列之间的空间仍然是一样的。我需要让这些列更加紧凑。如何做到？ - Tom

在我的示例表格中，尽可能填充尽少的空间。如果您希望列之间更接近，则只有一种方法可以减少 th 和 td 元素的填充（使用 table.v-table tbody td 和 table.v-table thead th 选择器）。我已更新答案的 CodePen。 - Max Sinev

Answer 3

只需在您的标题中添加（宽度，对齐方式）即可。

 <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
 </v-data-table>

头部看起来像

 header:[ {
        text: 'Dessert ',
          align: 'center',<------------to align left/center/right/
          value: 'name',
          width: "1%"//<-------------------asign width/
        },
   ]

Vuetify 头部选项：

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}

- Balaji

---

简单而有效 - Omar

Answer 4

你可以使用CSS来玩耍，覆盖它们的类。尝试修改 td 的 width。

这里有一个代码笔：https://codepen.io/anon/pen/gjxPMJ 我还将文本左对齐到 <td class="text-xs-left"> 中。

只需玩弄宽度值即可获得所需效果，也可以使用百分比。

- V. Sambor

---

据我所知，OP希望标题彼此靠近（因此宽度应该被改变）？ - Traxo

@Traxo 你说得对，我误解了问题，但是他确实可以调整 td 的宽度。 - V. Sambor

@V.Sambor，我尝试了您的CodePen并使用了不同的值，但问题仍然存在。这是我的更新示例：https://codepen.io/anon/pen/ajyjLZ - Tom

Answer 5

在我的情况下，所有在数组中定义为固定宽度，如“100px”的元素都不能正常工作。 至少其中一个元素应该使用相对宽度进行定义，例如“10%”。

- Jack