javascript - 使用 CSS 设置数据表样式以删除边框和更改数据单元格高度?
问题描述
我有一个 vuetify 数据表,我正在尝试自定义样式以删除边框并将高度更改为 40 px,但它似乎不起作用。这是一个示例代码笔。
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: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%'
},
]
}
}
})
.table.v-table.tbody.td,
table.v-table.tbody.th {
height: 40px !important;
border: hidden !important;
}
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.20/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.20/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-data-table id="customStyleTable" :headers="headers" :items="desserts" class="elevation-1">
<template v-slot:items="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>
我用来定位单元格的 CSS 似乎没有改变高度或边框,但检查器显示了那些指定的类。任何帮助将不胜感激。谢谢你。
解决方案
我认为这些应该对你有用。:) 我右键单击 Chrome 中的表格并单击“检查”以找到您尝试覆盖的样式。
table.v-table tbody td {
height: 40px;
border: none;
}
.theme--light.v-table tbody tr:not(:last-child) {
border-bottom: none;
}
推荐阅读
- c# - Google Drive API Q 逻辑子句顺序
- swift - RxSwift URLSession 请求被处理
- javascript - 通过three.js创建圆顶模型
- python - Python循环卡住了?
- android - Service 和 BroadcastReceiver 之间的通信
- angular - Payfast ITN 与 Express.js 的集成
- excel - 仅当计算机被锁定时 VBA“需要对象”错误
- csv - 当当前文件到达最后一个数据时,JMeter 更改 CSV 文件
- javascript - Firefox 和 Edge 无法连接到 Quickblox Chat
- javascript - React Gatsbyjs 根据纵横比向 gatsby-image 添加类