<p>Vuetify テーブルを使用する Vue アプリがありますが、境界テーブルはサポートされていません (ただし、https://github.com/vuetifyjs/vuetify/issues/16336 を参照)。そこで、不足している枠線を独自の CSS を使用して追加してみました。 </p> <p>次の例を示します (リンクをコピー)</p> <pre class="brush:php;toolbar:false;"><テンプレート> <v-アプリ> <v-main> <v-テーブル> <頭> <tr> 列 1 列 2 </tr> </頭> <みんな> <tr v-for="(row, rowIndex) in tableMatrix" :key="rowIndex"> <template v-for="(セル、columnIndex) 行内" :key="columnIndex"> <td v-if="cell.isCoveredByPreviousCell" class="d-none" /> <td v-else :rowspan="cell.rowspan"> <template v-if="cell.content"> {{ セル.コンテンツ }} </テンプレート> </td> </テンプレート> </tr> </tbody> </v-テーブル> </v-main> </v-app> </テンプレート> <スクリプトセットアップ lang="ts"> import { ref, Ref } から 'vue'; インターフェイス Cell { isCoveredByPreviousCell: ブール値; 行スパン: 数値; コンテンツ?: 文字列; } タイプ TableMatrix = Cell[][]; const childCell: Cell = { isCoveredByPreviousCell: false, rowspan: 1, content: "行範囲 1 のセル" }; const tableMatrix: Ref<TableMatrix> = ref([ [{ isCoveredByPreviousCell: false, rowspan: 2, content: "行範囲 2 のセル" },{ ...childCell }], [{ isCoveredByPreviousCell: true, rowspan: 1, content: "親によってカバーされています" },{ ...childCell }], [{ ...childCell },{ ...childCell }], [{ ...childCell }, { isCoveredByPreviousCell: false, rowspan: 2, content: "行範囲 2 のセル" }], [{ ...childCell }, { isCoveredByPreviousCell: true, rowspan: 1, content: "親によってカバーされている" }], [{ isCoveredByPreviousCell: false, rowspan: 2, content: "行範囲 2 のセル" },{ ...childCell }], [{ isCoveredByPreviousCell: true, rowspan: 1, content: "親によってカバーされています" },{ ...childCell }], ]) </スクリプト> <スタイル> テーブル { ボーダー: 1px ソリッド #e6e6e6; } テーブル th { border-top: 1px ソリッド #e6e6e6; } テーブル th th { border-left: 1px ソリッド #e6e6e6; } テーブル td td { border-left: 1px ソリッド #e6e6e6; } </style></pre> <p>最後のセルの行範囲が 1 より大きい場合、境界線が太くなっていることがわかります</p> <p>この場合、表の境界線を修正するためにどの CSS 「ルール」が欠落しているか知っている人はいますか? </p>