Question

我有一张表，其中最初有7列和4行。我想要固定宽度到td和th。挑战是我在表中添加动态列和行，我成功的是我遇到的问题是我无法控制td的宽度。最初我给表，thead和tbody提供100％的宽度，给td提供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增加15％的宽度，如果td的总宽度为th，那么一个卷轴应该到来并且没有改变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>

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

1 个答案: