gpt4 book ai didi

html - Vuetify - 将 TR 高度设置为低于最小值

转载 作者:太空宇宙 更新时间:2023-11-03 20:27:05 25 4
gpt4 key购买 nike

CodePen

我想将数据行的高度设置为低于 Vuetify.css 设置的最小值。我可以将高度设置为任意大的值,但低于 ~50px 的值什么都不做。我可以做一些 CSS 覆盖来完成这个吗?我宁愿不搜索 Vuetify.css 文件并在那里进行更改,但我也无法使用 !important 获得所需的格式。

<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<tr style="height: 10px;"> <!-- Does nothing. height: 100px works fine. -->
<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>
</tr>
</template>
</v-data-table>
</v-app>
</div>

<script>
new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
value: false,
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
value: false,
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
}
]
}
}
})
</script>

最佳答案

这可能是因为 td 具有高度属性。尝试通过覆盖它来更改 td 的高度。

table.v-table tbody td, table.v-table tbody th {
height: 19px;
}

关于html - Vuetify - 将 TR 高度设置为低于最小值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51452166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com