关于表格问题

为什么我的效果不一样？

Satine00 2017-08-18

源自：CSS文本样式 3-10 vertical-align

收起

2回答

卡布琦诺回答被采纳获得+3积分 2017-08-21 09:12:07

去掉表格里面嵌套的span标签，然后给td设置class。再设置td的样式即可，即：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    td {
        height: 80px;
        width: 100px
    }

    .sp1 {
        vertical-align: top;
    }

    .sp2 {
        vertical-align: middle;
    }

    .sp3 {
        vertical-align: bottom;
    }
    </style>
</head>

<body>
    <table border="1px" cellspacing="0">
        <tr>
            <td class="sp1">top</td>
            <td class="sp2">middle</td>
            <td class="sp3">bottom</td>
        </tr3
    </table>
</body>

</html>

祝学习愉快！

收起回答

Satine00 提问者 #1

非常感谢！

2017-08-24 10:36:29

卡布琦诺 2017-08-18 17:57:30

建议亲将代码贴过来，以便于大家更准确的发现问题并帮助解答，祝学习愉快！

收起回答

提问者 Satine00 #1

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css">td{height: 80px;width: 100px} .sp1{vertical-align:top; } .sp2{vertical-align: middle;} .sp3{vertical-align: bottom;} span{font-size: 14px;color: red;} </style> </head> <body> <table border="1px" cellspacing="0"> <tr> <td><span class="sp1">top</span></td> <td><span class="sp2">middle</span></td> <td><span class="sp3">bottom</span></td> </tr> </table> </body> </html>

2017-08-18 18:08:56