实现完全边框的 Vuetify HTML 表格：分步指南-PHP中文网问答

<p>我有一个使用 Vuetify 表的 Vue 应用程序，该表不支持边框表（但请参阅 https://github.com/vuetifyjs/vuetify/issues/16336 ）。这就是为什么我尝试使用自己的 CSS 来添加缺失的边框。</p> <p>给出以下示例（复制链接）</p> <pre class="brush:php;toolbar:false;"><template> <v-app> <v-main> <v-table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in tableMatrix" :key="rowIndex"> <template v-for="(cell, columnIndex) in row" :key="columnIndex"> <td v-if="cell.isCoveredByPreviousCell" class="d-none" /> <td v-else :rowspan="cell.rowspan"> <template v-if="cell.content"> {{ cell.content }} </template> </td> </template> </tr> </tbody> </v-table> </v-main> </v-app> </template> <script setup lang="ts"> import { ref, Ref } from 'vue'; interface Cell { isCoveredByPreviousCell: boolean; rowspan: number; content?: string; } type TableMatrix = Cell[][]; const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "cell with rowspan 1" }; const tableMatrix: Ref<TableMatrix> = ref([ [{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }], [{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }], [{ ...childCell },{ ...childCell }], [{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" }], [{ ...childCell }, { isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" }], [{ isCoveredByPreviousCell: false, rowspan: 2, content: "cell with rowspan 2" },{ ...childCell }], [{ isCoveredByPreviousCell: true, rowspan: 1, content: "covered by parent" },{ ...childCell }], ]) </script> <style> table { border: 1px solid #e6e6e6; } table th { border-top: 1px solid #e6e6e6; } table th + th { border-left: 1px solid #e6e6e6; } table td + td { border-left: 1px solid #e6e6e6; } </style></pre> <p>如果最后一个单元格的行跨度大于 1，您可以看到它的边框较粗</p> <p>有人知道缺少哪个CSS“规则”来修复这种情况下的表格边框吗？</p>

new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { headers: [ { text: 'Dessert (100g serving)', align: 'start', 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%', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%', }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%', }, ], } }, }) .my-border { border-left: 5px solid red; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.2/dist/vuetify.min.css"> <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.2/dist/vuetify.min.js"></script> <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" > <template slot="item.name" slot-scope="data"> <div :class="data.item.calories % 2 === 0 ? 'my-border': ''">{{data.item.name}}</div> </template> </v-data-table> </v-app> </div>