html-table - Bootstrap 5 - 表格响应 - 不工作(对我来说)

Question

我无法让水平滚动与表格响应一起工作，除非我添加如下内容:style = "width: 1000px"到表格(见下文)。但这会导致垂直滚动条(如果有的话)移动到表格的右侧。

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

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