实现完全边框的 Vuetify HTML 表格:分步指南
P粉373596828
P粉373596828 2023-09-03 18:46:38
[CSS3讨论组]

我有一个使用 Vuetify 表的 Vue 应用程序,该表不支持边框表(但请参阅 https://github.com/vuetifyjs/vuetify/issues/16336 )。这就是为什么我尝试使用自己的 CSS 来添加缺失的边框。

给出以下示例(复制链接)

<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>

如果最后一个单元格的行跨度大于 1,您可以看到它的边框较粗

有人知道缺少哪个CSS“规则”来修复这种情况下的表格边框吗?

P粉373596828
P粉373596828

全部回复(1)
P粉464082061

只需将 border-collapse:collapse; 属性添加到表格即可。

table {
  border-collapse: collapse;
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号