文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为td指定固定宽度，如果宽度大于屏幕，则滚动

问为td指定固定宽度，如果宽度大于屏幕，则滚动
EN

Stack Overflow用户
提问于 2018-04-07 16:20:32
回答 1查看 41关注 0票数 1

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

这是我的CSS：

代码语言：javascript
复制
    table {
        width: 100%;
        overflow:scroll;
    }
    thead {
        width: 100%;
        overflow:scroll;
    }
    tbody {
        width: 100%;
        overflow:scroll;
    }
    td{
        width: 15%;
    }
    th{
        width: 15%;
    }

下面是我的表格：

代码语言：javascript
复制
<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的宽度没有变化。

请帮帮忙。

jquery
html
css
html-table
EN

回答 1

Stack Overflow用户

发布于 2018-04-07 17:00:12

CSS

代码语言：javascript
复制
 table {
    display: block;
    overflow: scroll;
    white-space: nowrap;
}
th div
 {
   width:150px;  //give here your approximate width
 }

将html更改为

代码语言：javascript
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49705372

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档