用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>

效果:

时间: 2024-10-12 03:53:09

用table绘制 等宽等间距的单元的相关文章

table中怎么设置两行间距

table中设置两行间距方法: css代码实现 <style> table   {   border-collapse:   separate;   border-spacing:   10px;   } </style> [/html]

关于bootstrap table 固定列宽

首先为table 设置 style="table-layout: fixed;" <table id="assessStage" data-height="467" data-mobile-responsive="true" style="table-layout: fixed;">                </table>然后在下方columns 处设置width$('#as

绘制较宽轮廓和尖锐边缘,AGG渲染问题

原文如下: I have played quite a bit with AGG these last weeks and I have come up with following problem: when painting wide outlines of paths with sharp edges, AGG somehow messes up. 作者的回答: Well, it's not that trivial. I honestly don't know a simple solu

ios -使用NSLayoutConstraint实现多个view等宽等高等间距

@interface ViewController () { UIView *firstView; UIView *secondView; UIView *thirdView; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; /** 第一个view */ firstView = [[UIView alloc]init]; firstView.translatesAutoresizin

我理解的&lt;table&gt;表格

<table>表格 [默认样式] //IE7-浏览器不支持border-spacing table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; } [属性] [1]border(在html5中,border只能为"1"或" ") border="0"//没有边框 border="8"//8像素宽的边框 [2]cel

html table 表格

前面的话 在CSS出现之前,table元素常常用来布局.这种做法在HTML4之后不再推荐使用.而现在有些矫枉过正,使用table展示数据都可能会被说不规范.本文将详细介绍HTML表格table table [默认样式] //IE7-浏览器不支持border-spacing table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; } [属性] 1.border(在html5中,border只能为"

关于table

# table 属性bgcolor:设置表格的背景颜色 #<!--属性bgcolor:设置表格的背景颜色--> <table border="1" bgcolor="red">    <tr>        <td>            测试数据        </td>    </tr>    <tr>        <td>            测试数据     

canvas绘制形状

栅格 之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0)).所有元素的位置都相对于原点定位.所以图中蓝色方形左上角的坐标为距离左边(Y轴)x像素,距离上边(X轴)y像素(坐标为(x,y)). 绘制矩形 不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径. canvas提供了三种方法绘制矩形

绘制矩形

1.与矩形有关的方法:fillRect()    strokeRect()   clearRect()  这三个方法都能接受四个参数:矩形的x坐标,矩形的y坐标,矩形的宽度和矩形的高度:单位都是像素 2 //绘制红色矩形.   填充为红色:从点(10,10)开始绘制矩形,宽和高均为50像素, context.fillStyle="#ff0000"; context.fillRect(10,10,50,50); //绘制蓝色矩形 然后填充被设置成了半透明的蓝色  从点(30,30)开始绘