J'ai une application Vue qui utilise les tables Vuetify, qui ne prend pas en charge les tables de bordure (mais voir https://github.com/vuetifyjs/vuetify/issues/16336). C'est pourquoi j'ai essayé d'utiliser mon propre CSS pour ajouter la bordure manquante.
给出以下示例（复制链接）
Col 1 Col 2 ≪/tr> ≪/tête>{{ cellule.content }} ≪/tr>importer { ref, Ref } depuis 'vue' ; interface Cell { isCoveredByPreviousCell : booléen ; étendue de lignes : nombre ; contenu ? : chaîne ; } tapez TableMatrix = Cell[][]; const childCell : Cell = { isCoveredByPreviousCell : false, rowspan : 1, contenu : "cellule avec rowspan 1" } ; const tableMatrix : Réf = réf([ [{ isCoveredByPreviousCell : false, rowspan : 2, contenu : "cellule avec rowspan 2" },{ ...childCell }], [{ isCoveredByPreviousCell : true, rowspan : 1, contenu : "couvert par le parent" },{ ...childCell }], [{ ...childCell },{ ...childCell }], [{ ...childCell }, { isCoveredByPreviousCell : false, rowspan : 2, contenu : "cellule avec rowspan 2" }], [{ ...childCell }, { isCoveredByPreviousCell : true, rowspan : 1, contenu : "couvert par le parent" }], [{ isCoveredByPreviousCell : false, rowspan : 2, contenu : "cellule avec rowspan 2" },{ ...childCell }], [{ isCoveredByPreviousCell : true, rowspan : 1, contenu : "couvert par le parent" },{ ...childCell }], ]) Si l'étendue des lignes de la dernière cellule est supérieure à 1, vous pouvez voir qu'elle a une bordure plus épaisse
Est-ce que quelqu'un sait quelle "règle" CSS manque pour corriger les bordures des tableaux dans ce cas ?
Sujets populairesPlus>Articles populaires
- À propos de nous Clause de non-responsabilité Sitemap
- Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utilisez slot=item, puis appliquez le style en fonction de l'emplacement défini.
Voici un exemple :
Afficher l'extrait de code
Utilisez slot=item.name.
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; } {{data.item.name}} Ajoutez simplement l'attribut
border-collapse:collapse;au tableau.table { border-collapse: collapse; }