首页 > 代码库 > 用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绘制 等宽等间距的单元
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。