问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

td为什么设置了宽度却无效

头像
rain
    5036117241

    如下图所示，我对td设置了196px，结果computed显示的却是233px.
    百度说什么对table设置如下，也不起作用~~

    border-collapse: collapse;
border-spacing: 0;
word-wrap: break-word;
word-break: break-all;

    clipboard.png

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <style>
        #common-box {
            width: 550px;
            border-radius: 4px;
            margin: 0 auto;
            box-sizing: border-box;
            background: #ffffff;
        }

        #common-box .regist-login-button {
            display: inline-block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 4px;
            color: #ffffff;
            background: pink;
            font-size: 18px;
        }

        #common-box table tbody tr {
            width: 100%;
        }

        #common-box table tbody tr td {
            height: 50px;
            color: #999999;
            font-size: 14px;
            position: relative;
            padding: 0;
        }

        #common-box table tbody tr td input,
        #common-box table tbody tr td select {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
            border: 1px solid pink;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #common-box table tbody tr td button {
            width: 100%;
            height: 100%;
            appearance: none;
            border: none;
        }

        #common-box table tbody tr td:first-of-type {
            width: 95px;
            color: #666666;
            font-size: 14px;
        }

        #common-box table tbody tr td select {}

        #common-box table tbody tr td.select-ele::after {
            content: '';
            display: block;
            width: 36px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
            background: pink url(../../../static/img/more.png) center center no-repeat;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            pointer-events: none;
        }

        #common-box table tr .rl-td-h80 {
            height: 80px;
        }

        #common-box table tr .rl-td-h60 {
            height: 60px;
        }

        #common-box table tr .rl-td-h50 {
            height: 50px;
        }

        #common-box table tr .rl-td-h40 {
            height: 40px;
        }

        #common-box table tr .rl-td-h30 {
            height: 30px;
        }

        #common-box table tr .rl-td-w335 {
            width: 335px;
        }

        #common-box table tr .rl-td-w220 {
            width: 220px;
        }

        #common-box table tr .rl-td-w205 {
            width: 205px;
        }

        #common-box table tr .rl-td-w105 {
            width: 105px;
        }

        #common-box table tr .rl-td-w20 {
            width: 20px;
        }


        #common-box table tr .rl-td-w10 {
            width: 10px;
        }

        #common-box table tr .notice {
            display: none;
            font-size: 12px;
            color: #ff2a14;
        }

        #common-box #validate {
            width: 100%;
            height: 100%;
            border: 1px solid pink;
            border-radius: 4px;
            font-size: 0;
        }

        #common-box #validate canvas {
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }



        #login_form {
            margin-top: 50px;
            padding: 0 60px;
        }

        #login_form table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            word-wrap: break-word;
            word-break: break-all;
        }

        #common-box #login_form table tbody tr td:first-of-type {
            width: 42px;
        }

        #common-box #login_form table tbody tr:last-of-type td:first-of-type {
            width: 205px;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="wrap-content">
            <!--base header -->

            <!-- regist -->
            <section id="common-box">
                <form id="login_form">
                    <table>

                        <tbody>
                            <tr>
                                <td>用户名</td>
                                <td class="rl-td-w20"></td>
                                <td colspan="5" class="rl-td-w335"><input type="text" name="username" id="username">
                                </td>

                            </tr>
                            <tr>
                                <td class="rl-td-h30"></td>
                                <td colspan="6" class="notice notice-un rl-td-h30"></td>
                            </tr>
                            <tr>
                                <td>密码</td>
                                <td class="rl-td-w20"></td>
                                <td colspan="5" class="rl-td-w335"><input type="password" name="password" id="password"
                                        placeholder="请输入您的密码"></td>

                            </tr>
                            <tr>
                                <td class="rl-td-h30"></td>
                                <td colspan="6" class="notice notice-pw rl-td-h30"></td>
                            </tr>

                            <tr>
                                <td>验证码</td>
                                <td class="rl-td-w20"></td>
                                <td colspan="3" class="rl-td-w220  rl-td-h50">
                                    <input type="text" name="img-code" id="img-code" placeholder="请输入验证码">
                                </td>
                                <td class="rl-td-w10"></td>
                                <td class="rl-td-w105">
                                    <div id="validate" class="validate"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="rl-td-h30"></td>
                                <td colspan="6" class="notice notice-img-code rl-td-h30"></td>
                            </tr>

                            <tr>
                                <td colspan="7" class="rl-td-h50"></td>
                            </tr>

                            <tr>
                                <td class="rl-td-h30  rl-td-w205" colspan="3"><a href="#">注册账号</a></td>
                                <td class="rl-td-w20"></td>
                                <td class=" rl-td-w205" colspan="3"><a href="#">忘记密码</a></td>
                            </tr>

                        </tbody>
                    </table>
                </form>
            </section>


        </div>
        <!--base footer -->
    </div>

</body>

</html>
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <style>
        #common-box {
            width: 550px;
            border-radius: 4px;
            margin: 0 auto;
            box-sizing: border-box;
            background: #ffffff;
        }

        #common-box .regist-login-button {
            display: inline-block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 4px;
            color: #ffffff;
            background: pink;
            font-size: 18px;
        }

        #common-box table tbody tr {
            width: 100%;
        }

        #common-box table tbody tr td {
            height: 50px;
            color: #999999;
            font-size: 14px;
            position: relative;
            padding: 0;
        }

        #common-box table tbody tr td input,
        #common-box table tbody tr td select {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 20px;
            border: 1px solid pink;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #common-box table tbody tr td button {
            width: 100%;
            height: 100%;
            appearance: none;
            border: none;
        }

        #common-box table tbody tr td:first-of-type {
            /* width: 95px; */
            color: #666666;
            font-size: 14px;
        }

        #common-box table tbody tr td select {}

        #common-box table tbody tr td.select-ele::after {
            content: '';
            display: block;
            width: 36px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
            background: pink url(../../../static/img/more.png) center center no-repeat;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            pointer-events: none;
        }

        #common-box table tr .rl-td-h80 {
            height: 80px;
        }

        #common-box table tr .rl-td-h60 {
            height: 60px;
        }

        #common-box table tr .rl-td-h50 {
            height: 50px;
        }

        #common-box table tr .rl-td-h40 {
            height: 40px;
        }

        #common-box table tr .rl-td-h30 {
            height: 30px;
        }

        #common-box table tr .rl-td-w365 {
            width: 365px;
        }

        #common-box table tr .rl-td-w255 {
            width: 255px;
        }

        #common-box table tr .rl-td-w220 {
            width: 220px;
        }

        #common-box table tr .rl-td-w205 {
            width: 205px;
        }

        #common-box table tr .rl-td-w105 {
            width: 105px;
        }

        #common-box table tr .rl-td-w100 {
            width: 100px;
        }

        #common-box table tr .rl-td-w95 {
            width: 95px;
        }

        #common-box table tr .rl-td-w45 {
            width: 45px;
        }

        #common-box table tr .rl-td-w20 {
            width: 20px;
        }


        #common-box table tr .rl-td-w10 {
            width: 10px;
        }

        #common-box table tr .notice {
            display: none;
            font-size: 12px;
            color: #ff2a14;
        }

        #common-box #validate {
            width: 100%;
            height: 100%;
            border: 1px solid pink;
            border-radius: 4px;
            font-size: 0;
        }

        #common-box #validate canvas {
            width: 100%;
            height: 100%;
            border-radius: 4px;
        }


        #login_form {
            padding: 0 60px;
        }

        #login_form table {
            width: 100%;
        }

        #common-box #login_form table tbody tr td:first-of-type {
            /* width: 45px; */
        }

        #common-box #login_form table tbody tr:last-of-type td:first-of-type {
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="wrap-content">
            <!--base header -->

            <!-- regist -->
            <section id="common-box">
                <form id="login_form">
                    <table>
                        <thead>
                            <tr>
                                <th colspan="7" class="rl-td-h40"></th>
                            </tr>
                            <tr>
                                <th colspan="7" class="ft-24 color-33">用户登录</th>
                            </tr>
                            <tr>
                                <th colspan="7" class="rl-td-h40"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="rl-td-w45">用户名</td>
                                <td class="rl-td-w20"></td>
                                <td colspan="5" class="rl-td-w335"><input type="text" name="username" id="username">
                                </td>

                            </tr>
                            <tr>
                                <td class="rl-td-h30"></td>
                                <td class="rl-td-h30"></td>
                                <td colspan="5" class="notice notice-un rl-td-h30"></td>
                            </tr>
                            <tr>
                                <td class="rl-td-w45">密码</td>
                                <td class="rl-td-w20"></td>
                                <td colspan="5" class="rl-td-w335"><input type="password" name="password" id="password"
                                        placeholder="请输入您的密码"></td>

                            </tr>
                            <tr>
                                <td class="rl-td-h30"></td>
                                <td class="rl-td-h30"></td>
                                <td colspan="6" class="notice notice-pw rl-td-h30"></td>
                            </tr>

                            <tr>
                                <td class="rl-td-w45">验证码</td>
                                <td class="rl-td-w20"></td>
                                <td colspan="3" class="rl-td-w255  rl-td-h50">
                                    <input type="text" name="img-code" id="img-code" placeholder="请输入验证码">
                                </td>
                                <td class="rl-td-w10"></td>
                                <td class="rl-td-w100">
                                    <div id="validate" class="validate"></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="rl-td-h30"></td>
                                <td class="rl-td-h30"></td>
                                <td colspan="6" class="notice notice-img-code rl-td-h30"></td>
                            </tr>

                            <tr>
                                <td colspan="7" class="rl-td-h50"></td>
                            </tr>
                            <tr>
                                <td colspan="7"><span class="regist-login-button" id="regist-button">登录</span></td>
                            </tr>
                            <tr>
                                <td colspan="7" class="rl-td-h40"></td>
                            </tr>
                            <tr>
                                <td class="rl-td-h30  rl-td-w205" colspan="3"><a href="./regist.html">注册账号</a></td>
                                <td class="rl-td-w20"></td>
                                <td class=" rl-td-w205" colspan="3"><a href="./regist.html">忘记密码</a></td>
                            </tr>

                        </tbody>
                    </table>
                </form>
            </section>

            <!-- regist success -->

            <!--base footer -->
        </div>

</body>

</html>
    htmlcss
    阅读 8.7k
    2 个回答
    得票最新
    头像
    北堂棣
      6.6k94268
      ✓ 已被采纳

      把你的样式 #common-box table tr .rl-td-w205 给td设置宽度 改成：

      #common-box table tr .rl-td-w205 a {
    width: 205px;
    display: inline-block;
}

      效果示例

      至于原因我也解释不清楚。

      总之，你这种表单布局，能用div+css实现的话，还是不要用table布局，table的特性适用于展示表格数据，可能用在别的布局中会出现莫名其妙的问题。。。

      table以及td宽度设置细节

      头像
      Kisstar
        54035

        给表格(table)加上 table-layout:fixed; 这个样式试试？
        以指定列宽由表格宽度和列宽度设定。

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