大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

表格单元格内的两端对齐

前端入坑纪 49

许久未更,最近做了个表格。碰到了两端对齐的坑(以前看到过,后来忘了。果然好记性不如烂笔头),今天来分享下~

好,详解如下!

OK,first things first! github项目地址

性冷淡表格
HTML 结构
    <table cellspacing='0' cellpadding='0'>
        <tr>
            <td><span>姓名</span></td>
            <td>休泽</td>
        </tr>
        <tr>
            <td><span>职业</span></td>
            <td>修业</td>
        </tr>
    </table>

就是这么简单的一个表格,这里的span是整个效果的灵魂,mark

CSS 结构
        table {
            width: 300px;
            margin: 0 auto;
            background: #fcfcfc;
            border: 1px solid #ccc
        }

        table tr span {
            display: block;
            padding: 0 8px;
            height: 30px;
            line-height: 30px;
            text-align: justify;
            overflow: hidden;
        }


        table tr span::after {
            content: "";
            width: 100%;
            display: inline-block;
        }

        table td {
            text-align: center;
            border: 1px solid #333
        }

让span设置成块级元素,这样设置了30px的高,然后overflow:hidden,截掉超过高度的内容。而这个超过的内容就是span:after。???所以为什么要这样呢???就我百度到和自己理解后的原因,应该是text-align:justify,这个效果对内容的最后一行是不起作用的。所以让span:after这个变成span内的最后一行,那么之前的内容就可以两端对齐生效了。

其实text-align-last:justify可以很方便的做到上述效果,不过基于个浏览器的兼容问题,你懂得,ε=(ο`*)))唉

好了,到此,本文告一段落!感谢您的阅读!祝你身体健康,阖家幸福!
打开支付宝首页搜 625097528 领红包,领到大红包的小伙伴赶紧使用哦!
支持你我,扫一扫红包