表格单元格内的两端对齐

前端入坑纪 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可以很方便的做到上述效果，不过基于个浏览器的兼容问题，你懂得，ε=(´ο｀*)))唉

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

支持你我，扫一扫红包