jquery - 给td固定宽度，如果宽度大于屏幕，则滚动

我有一个表，最初有7列和4行。
我想将宽度固定为td和th。
挑战是我要在表中动态添加列和行，并且成功实现了我所面临的问题是我无法控制td的宽度。
最初，我给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的总宽度等于100，则应该有一个滚动条，并且th，td的宽度不变。

请帮忙。

最佳答案

的CSS

将html更改为