您可以尝试扩展<table>容器的宽度
超文本标记语言：

<table>
   <tbody>
      <tr><td>hi</td></tr>
      <tr><td>hi</td></tr>
   </tbody>
 </table>

字符串
CSS格式

table {
   width: 100%;
}
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;
   width: auto;
}

型

而不是给填充表行，你可以给予它的表单元格，以避免display: block问题的行。
更新：对于边距，您可以使用如下的间隔符，因为我们无法在不更改display的情况下在行上使用边距

table{
    width: 100%;
}

tbody>tr {
    border: 1px solid rgba(0, 0, 0, 0.175) !important;
    border-radius: 0.375rem !important;
}

tbody>tr td, thead>tr td{
    padding: 1rem 0.5rem 1rem 0.5rem;
}

个字符

你也许能找到解决办法但这是给未来访客的
这个问题是由display:blobk;引起的，就像在其他答案中提到的，我在使用display:flex;时也遇到了同样的问题。
幸运的是，两者都有相同的解决方案，丢失了display:block/flex;。

问题一：

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

字符串
x1c 0d1x和

tbody>tr {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            padding: 1rem 0.5rem 1rem 0.5rem;
            margin: 1.5rem;
            border: 1px solid rgba(0, 0, 0, 0.175) !important;
            border-r

型

的

解决方案：

丢失显示样式。

问题二：

移除显示器给出了几乎可行的解决方案，但是填充和边距现在不会生效：

tbody>tr {
            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;
        }

型

的

最终解决方案：

不是将margin应用于每一行，而是将它应用于具有border-spacing:0 1rem;的表，最重要的是将border-collapse作为separate最终产品：

table {
            width: 50%;
            border-collapse: separate !important;
            border-spacing: 0 1rem;
        }

        tbody>tr {
            border-radius: 0.375rem;
            outline: 1px solid rgba(0, 0, 0, 0.175)
            /* we use outline instead of border */
        }

        tbody>tr>td {
            padding: 1rem 0.5rem 1rem 0.5rem;
        }

<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>
                                                name
                                            </th>
                                            <th>
                                                idk
                                            </th>
                                            <th>
                                                idk2
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="p-datatable-tbody" role="rowgroup">
                                        <tr class tabindex="-1" role="row">
                                            <td class role="cell">
                                                John Smith
                                            </td>
                                            <td class role="cell">
                                                smthin
                                            </td>
                                            <td class role="cell">
                                                sm other thing
                                            </td>
                                            <!-- other table cells -->
                                        </tr>
                                        <tr class tabindex="-1" role="row">
                                            <td class role="cell">
                                                smith john
                                            </td>
                                            <td class role="cell">
                                                smthin2
                                            </td>
                                            <td class role="cell">
                                                sm other thing2
                                            </td>
                                            <!-- other table cells -->
                                        </tr>
                                        <!-- other rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

的字符串

重要

如果你用datatables典当你的表！对两种表格样式都很重要

table {
     width: 100%;
     border-collapse: separate !important;
     border-spacing: 0 1rem !important;
}

型