首页 > 代码库 > 用table绘制 等宽等间距的单元

用table绘制 等宽等间距的单元

 

css:

        .test1 {
                empty-cells: show;/*show:指定当表格的单元格无内容时,显示该单元格的边框。*/
                border-spacing: 10px 10px;/*用长度值来定义行和单元格的边框在横向和纵向上的间距。不允许负值*/
                border-collapse: separate;/*separate:边框独立;collapse:相邻边被合并*/
                table-layout: fixed;/*fixed:固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关。也就是说,内容可能被裁切*/
                width: 100%;
            }
            
            .test2 {
                empty-cells: hide;/*hide:指定当表格的单元格无内容时,隐藏该单元格的边框。*/
                border-spacing: 10px 10px;
                border-collapse: separate;
                table-layout: fixed;
                width: 100%;
            }
            
            td {
                background-color: aliceblue;
                text-align: center;
                border: 1px solid #3198F7;
                border-radius: 5px;
                height: 50px;
            }

 

html:

      <h1>show:</h1>
        <table class="test1">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Joy</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kate</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

        <h1>hide:</h1>
        <table class="test2">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Joy</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kate</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

 

效果:

技术分享

 

用table绘制 等宽等间距的单元