Bootstrap 5 - table-响应 - 不工作（对我来说）

Question

我无法使用 table-responsive 进行水平滚动，除非我添加如下内容： style = "width: 1000px" 到 table （见下文）。但这会导致垂直滚动条（如果有的话）移动到 table.

的右侧。

有人能给我指出正确的方向吗？

                        <!-- table -->
                    <div class="table-responsive">
                        <table class="m-auto table table-striped table-hover"
                                style = "width: 1000px'">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">COL 02 - 20</th>
                                    <th scope="col">COL 03 - 20</th>
                                    <th scope="col">COL 04 - 30</th>
                                    <th scope="col">COL 05 - 10</th>
                                    <th scope="col">COL 06 - 10</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Row 01 - Col 01</td>
                                    <td>Row 01 - Col 02</td>
                                    <td>Row 01 - Col 03</td>
                                    <td>Row 01 - Col 04</td>
                                    <td>Row 01 - Col 05</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Row 02 - Col 01</td>
                                    <td>Row 02 - Col 02</td>
                                    <td>Row 02 - Col 03</td>
                                    <td>Row 02 - Col 04</td>
                                    <td>Row 02 - Col 05</td>
                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Row 03 - Col 01</td>
                                    <td>Row 03 - Col 02</td>
                                    <td>Row 03 - Col 03</td>
                                    <td>Row 03 - Col 04</td>
                                    <td>Row 03 - Col 05</td>
                                </tr>...etc...

                                <tr>
                                    <th scope="row">6</th>
                                    <td>Row 06 - Col 01</td>
                                    <td>Row 06 - Col 02</td>
                                    <td>Row 06 - Col 03</td>
                                    <td>Row 06 - Col 04</td>
                                    <td>Row 06 - Col 05</td>
                                </tr>
                            </tbody>
                        </table> 
                    </div>

Answer 1

您可以通过添加

使其水平滚动

overflow-x: auto;

.table-scrollable {
  overflow-x: auto;
  max-width: 600px;
  box-shadow: inset 0 0 5px rgba(150, 150 ,150,0.35);
  margin: auto;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">

        <div class="table-scrollable">
<table class="m-auto table table-striped table-hover table-responsive " style="width:1000px;">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">COL 02 - 20</th>
            <th scope="col">COL 03 - 20</th>
            <th scope="col">COL 04 - 30</th>
            <th scope="col">COL 05 - 10</th>
            <th scope="col">COL 06 - 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Row 01 - Col 01</td>
            <td>Row 01 - Col 02</td>
            <td>Row 01 - Col 03</td>
            <td>Row 01 - Col 04</td>
            <td>Row 01 - Col 05</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Row 02 - Col 01</td>
            <td>Row 02 - Col 02</td>
            <td>Row 02 - Col 03</td>
            <td>Row 02 - Col 04</td>
            <td>Row 02 - Col 05</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Row 03 - Col 01</td>
            <td>Row 03 - Col 02</td>
            <td>Row 03 - Col 03</td>
            <td>Row 03 - Col 04</td>
            <td>Row 03 - Col 05</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Row 06 - Col 01</td>
            <td>Row 06 - Col 02</td>
            <td>Row 06 - Col 03</td>
            <td>Row 06 - Col 04</td>
            <td>Row 06 - Col 05</td>
        </tr>
    </tbody>
</table> 
</div>          
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 - table-响应 - 不工作（对我来说）

Bootstrap 5 - table-responsive - not working (for me)

html-table

responsive

bootstrap-5