如何将表格行样式化为全宽卡片？

我想给表格行设置卡片样式（保留原有行布局，仅改为全宽卡片），目前编写了以下CSS代码，已实现卡片效果，但卡片未占满宽度，导致数据与表头无法对齐，附上HTML结构，求调整方法。

现有CSS代码 #

tbody>tr {
  display: block;
  padding: 1rem 0.5rem 1rem 0.5rem;
  margin: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.175) !important;
  border-radius: 0.375rem !important;
}

表格HTML结构 #

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xxl-10 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="p-datatable p-component p-datatable-responsive-scroll" data-scrollselectors=".p-datatable-wrapper" pv_id_11>
                        <div class="p-datatable-header">
                        </div>
                        <div class="p-datatable-wrapper">
                            <table role="table" class="p-datatable-table">
                                <thead class="p-datatable-thead" role="rowgroup">
                                    <tr role="row">
                                        <!-- th's for headings -->
                                    </tr>
                                </thead>
                                <tbody class="p-datatable-tbody" role="rowgroup">
                                    <tr class tabindex="-1" role="row">
                                        <td class role="cell">
                                            "John Smith"
                                        </td>
                                        <!-- other table cells -->
                                    </tr>
                                    <!-- other rows -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

解决方案 #

问题核心是将tr设为display:block后，它脱离了表格原生布局流，且margin:1.5rem左右边距导致宽度不足，同时表头与内容列无法对齐。以下两种方案可解决：

方案一：使用Grid布局（推荐，对齐更稳定） #

利用Grid实现表格列的统一布局，保证表头与内容完全对齐，同时实现全宽卡片效果：

/* 设置表格为Grid布局，定义列宽（根据实际列数调整） */
.p-datatable-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 假设5列，可替换为具体宽度如20% 30% 20% 15% 15% */
  width: 100%;
}

/* 表头行继承表格列布局 */
.p-datatable-thead tr {
  display: grid;
  grid-template-columns: inherit;
  width: 100%;
  font-weight: bold;
}

/* tbody用gap控制行间距，确保全宽 */
.p-datatable-tbody {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1rem;
}

/* 卡片样式设置，全宽无左右margin */
.p-datatable-tbody > tr {
  display: grid;
  grid-template-columns: inherit;
  padding: 1rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
  width: 100%;
  margin: 0;
}

/* 统一单元格内边距与对齐方式 */
.p-datatable-thead th,
.p-datatable-tbody td {
  padding: 0.5rem;
  text-align: left;
}

方案二：调整Block布局适配表格 #

保留display:block，通过调整边距和单元格宽度实现对齐：

/* 确保表格和tbody占满宽度 */
.p-datatable-table,
.p-datatable-tbody {
  width: 100%;
}

/* tbody加左右padding，替代tr的左右margin */
.p-datatable-tbody {
  padding: 0 1.5rem;
}

/* 修改tr样式，仅保留上下margin，全宽显示 */
.p-datatable-tbody > tr {
  display: block;
  padding: 1rem 0.5rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
  width: 100%;
}

/* 给表头和单元格设置统一宽度（根据列数调整百分比） */
.p-datatable-thead th,
.p-datatable-tbody td {
  width: 20%; /* 5列时每列20%，按需修改 */
  display: inline-block;
  text-align: left;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者user14131782