问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

table标签内的td、th如何设置固定宽度，而不是自适应？

头像
guiqide0910
    602912

    效果：遇到一个问题，想用table展现一个表格。因为是手机应用页面，且列数不固定。当列数太多，超出屏幕时，tbody内可以横向滑动。

    意外：但发现td设置了width。但是不会起作用，而是根据屏幕宽度自动平分了宽度。比如100px,5个td。每个自动设成了20.
    图片描述

    csstablehtml
    阅读 53k
    3 个回答
    得票最新
    头像
    长颈鹿
      1.1k111
      ✓ 已被采纳
      table{
    min-width: 100%;
}
td{
    min-width: 100px;
}
.table-container{
    overflow:auto;
    display: block;
}

      html

      <div class="table-container">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            ......
        </tr>
    </table>
</div>
      头像
      heath_learning
        1.4k32029

        要想实现表格列宽固定，并希望在移动端可以横向滚动，给td的宽度是不可以的，而应该使用<colgroup>和<col>标签组合起来使用。以下代码可以参考

        <style>
    body{
        margin: 0;
        padding: 0;
    }
    .table-responsive{
        max-width: 375px;
        overflow: auto;
        margin: 50px auto;
    }
    table{
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #999;
        /* 必须要设置为fixed，这样列宽就可以由表格宽度和列宽度设定了 */
        table-layout: fixed;
    }
    th,td{
        border: 1px solid #999;
    }
    td{
        padding: 0 8px;
    }
</style>

<body>
    <div class="table-responsive">
        <table>
            <!-- 关键代码 start -->
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
            </colgroup>
            <!-- 关键代码 end -->
            <thead>
                <tr>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>89</td>
                    <td>95</td>
                    <td>86</td>    
                </tr>
                <tr>
                    <td>74</td>
                    <td>63</td>
                    <td>99</td>    
                </tr>            
            </tbody>
        </table>
    </div>
</body>

        图片描述

        头像
        guiqide0910
          602912

          谢谢~这样是可以的。不过我发现我的项目依然无法滑动，我用的是ionic，会在ion-content内层创建一个scroll容器，他屏蔽了内部的容器滑动。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏