Question

我在表格中有多个颜色，表格的标题是固定的。标题中的某些列（最后一个列）未在面板中列出。请在此处查看附带的演示

当coloumns的数量更加水平滚动条出现时，问题是标题不滚动并列在面板外。请找到演示here。

html代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table class="table" border="1">
        <thead>
            <tr>
                <td>Namffffffffffffffffffffffffe</td>
                <td>phone</td>
                <td>Address</td>
                <td>Street</td>
                <td>City</td>
                <td>Pin</td>
                <td>Comments</td>
                 <td>info</td>
                   <td>Amount</td>
                <td>percentage</td>
                 <td>total</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
             <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>         </tbody>
    </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

            </div>
        </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

css代码：

 .modal-body {

        overflow-y: auto;
    }

tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
thead {
    width: calc( 100% - 1em )
}
table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

Answer 1

编辑了你的css代码。希望这有帮助

 .modal-body {

        overflow-y: auto;
    }

tbody {
}
thead, tbody tr {
}
thead {
    width: calc( 100% - 1em )
}
table {border-collapse:collapse; height:300px;overflow: auto;
    display: block;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

水平滚动条不适用于标题

1 个答案: