引导程序表未跟随显示宽度：块

Question

从昨天开始我真的很麻烦。
我正在使用Bootstrap 4和表格。实际上，如果我将宽度设置为超过13.5vw，则不会跟随该表。这是小提琴https://jsfiddle.net/aq9Laaew/88681/
这是代码

HTML

            <table class="table table-striped datas-table table-sm rounded">
                <thead>
                    <tr>
                        <th scope="col">Date of Visit</th>
                        <th scope="col">Duration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                </tbody>
            </table>

然后是CSS

CSS

.datas-table {
    overflow: auto;
    display: block;
    border-radius: 5px;
    margin-top: 0.2604166666666667vw;
    margin-left: 0.5208333333333334vw;
    height: 16.11111111111111vh;
    width: 14.583333333333334vw;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}
.datas-table > tbody > tr > td:nth-child(2), .datas-table > thead > tr > th:nth-child(2) {text-align: right; padding-right: 1.1458333333333335vw;}
.datas-table > tbody > tr > td:nth-child(1), .datas-table > thead > tr > th:nth-child(1) {padding-left: 0.5729166666666667vw;}

正如您在小提琴中看到的那样，该表似乎没有出现。 我之所以要使用display：块，是因为溢出：auto，没有它，我的桌子就不会滚动，宽度也不会得到尊重

非常感谢

Answer 1

尝试我的表格代码，

size = (db['01'].distinct("Pharmacy")).length;
minPN = Math.ceil(size*0.3);

db['01'].aggregate(
    // Pipeline
    [
        // Stage 1
        {
            $unwind: {
                path : "$Medicine", 
            }
        },
        // Stage 2
        {
            $group: {
            _id:"$Medicine.MedName",
            pharmacies:{$addToSet:"$Pharmacy"}
            }
        },
        // Stage 3
        {
            $project: {
              pharmacies:1,
            pharmacies_count:{$size:"$pharmacies"}
            }
        },
        {
          $match:{pharmacies_count:{$gte:minPN}}
        }   
    ]
);

.viewTable {
        table-layout:fixed;
        margin:auto;
    }
    .thData, .tdData {
        padding:8px;
    text-align: center;
    }
    .theadData, tfoot {
    background-color: #9ac9fb;
        display:table;
        width:100%;
    }
    .table-height .table .tdData {
    vertical-align: middle !important; 
    }
    .viewTable .tbodyData {
        max-height:250px;
        overflow:auto;
        overflow-x:hidden;
        display:block;
    width:100%;
    }
    .item-dist .tbodyData {
        height:490px;
        overflow:auto;
        overflow-x:hidden;
    width:100%;
    }



    .tbodyData .trData {
        display:table;
        width:100%;
        table-layout:fixed;
        border-bottom: 1px solid #ffffff !important;
    }
    .table .theadData .thData {
    border: none !important;
    width: 10% !important;
        text-align: center;
    padding: 10px;
    }