Javascript 更改 VuetifyJS DataTable 单元格的默认宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51527489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the default width of a VuetifyJS DataTable cell
提问by Tom
I'm using the VuetifyJS Data Tableand I need to move the entries of each header cell as close as possible to each other. I tried to add a widthto each header but that didn't work - it seems there is a predefined width one can't go below.
我正在使用VuetifyJS 数据表，我需要将每个标题单元格的条目尽可能地彼此靠近。我试图为每个标题添加一个宽度，但这没有用 - 似乎有一个无法低于的预定义宽度。
Update: This is how it should look like - the margin between each row should be fixed at 10px:
更新：它应该是这样的 - 每行之间的边距应该固定为 10px：
Here is a CodePen example:
这是一个 CodePen 示例：
https://codepen.io/anon/pen/ejEpKZ?&editors=101
https://codepen.io/anon/pen/ejEpKZ?&editors=101
<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>
How to get them close together?
如何让他们靠得更近？
回答by Max Sinev
You can add another empty header and set widthof every column to min value(1%), except empty to make it fill all free space. Also you need to add empty tdto table body template to make grey row dividers visible.
您可以添加另一个空标题并将width每列设置为最小值（1％），除了空以使其填充所有可用空间。您还需要向td表格主体模板添加空以使灰色行分隔符可见。
See codepen: https://codepen.io/anon/pen/WKXwOR
见codepen：https://codepen.io/anon/pen/WKXwOR
回答by V. Sambor
You can play with CSS, override their classes. Try modifying td's width
您可以使用 CSS，覆盖它们的类。尝试修改td'swidth
Here you have a code pen: https://codepen.io/anon/pen/gjxPMJ
这里有一个代码笔：https: //codepen.io/anon/pen/gjxPMJ
I have also aligned text to the left for td :<td class="text-xs-left">
我还为 td 将文本左对齐：<td class="text-xs-left">
Just play with the width value to get what you want, you can use percentages as well.
只需使用宽度值即可获得所需的值，您也可以使用百分比。
