给 td 提供固定宽度，如果宽度超过屏幕，则滚动

Question

我有一个表格，最初有 7 列和 4 行。 我想要固定宽度为 td 和 th。 挑战是我在表格中动态添加列和行，我成功的原因是我面临的问题是我无法控制 td, th 的宽度。 最初我给 table、thead 和 tbody 100% 宽度，给 td, th 15% 宽度。

这是我的 CSS：

    table {
        width: 100%;
        overflow:scroll;
    }
    thead {
        width: 100%;
        overflow:scroll;
    }
    tbody {
        width: 100%;
        overflow:scroll;
    }
    td{
        width: 15%;
    }
    th{
        width: 15%;
    }

这是我的桌子：

<section class="panel">
<div class="panel-body">
    <div class="row">
        <div class="table-responsive">
            <table border="1px" class="fixed">
                <thead>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                    </tr>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                    </tr>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

我想要的是给 td, th 15% 的宽度，如果 td, th 的总宽度超过 100，那么滚动条应该会出现并且 th, td 的宽度没有变化。

请帮忙。

Answer 1

CSS

 table {
    display: block;
    overflow: scroll;
    white-space: nowrap;
}
th div
 {
   width:150px;  //give here your approximate width
 }

把html改成

<section class="panel">
<div class="panel-body">
    <div class="row">
        <div class="table-responsive">
            <table border="1px" class="fixed">
                <thead>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                        <th><div>Amount</div></th>
                        <th><div>Interest Rate</div></th>
                    </tr>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                    </tr>
                    <tr>
                        <th rowspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                        <th colspan="2">Banking Details</th>
                    </tr>
                    <tr>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                        <th>Amount</th>
                        <th>Interest Rate</th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>