html5 table标签的样式介绍(另附html5 table css居中的实例)


当前第2页 返回上一页

border-collapse必须为separate

必须为分离边框模式时有效

3、标题位置

<caption></caption>

作用:将标题位置由默认的位置改到表格之下

属性:caption-side

取值:

1、top

默认

2、bottom

标题位于表格之下

在css里面用div来居中表格:

看到使用display:table-cell可以将div渲染成一个cell,在表格td中的内容都是居中布局,那么想到了一个div中包含一个div,里面的div垂直居中的办法猜想可以使用:

将外面的div设置display:table-cell,那么里面的div就自动垂直居中了

测试才发现里面的div没有居中,那么使用vertical-align居中,因为:

只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。

例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。

现在table-cell中可以使用vertical-align:middle让里面的内容垂直居中了,如果我想要实现水平居中呢?text-algin:center,适合行内元素,那么我只要将里面的div设置为line-block就行了

代码验证:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style>

        .table {

            display: table-cell;

            vertical-align: middle;

            text-align: center;

        }

        .like {

            display: inline-block;

            width:100px;

            height:50px;

            border:2px solid black;

        }

    </style>

<div class="table" style="width:300px;height: 300px;background-color: #13c4a5">

    <div class="like">

    </div>

</div>

【相关推荐】

html strong标签是什么意思?html中strong标签的具体用法介绍

html5 audio标签怎么用?html5 自动播放实现代码实例

以上就是html5 table标签的样式介绍(另附html5 table css居中的实例)的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html5中利用postmessage实现ajax中的post跨域

5个java开发人员必须重视html5的理由

html5 canvas基本绘图之绘制线条

html table怎么实现不换行显示

canvas跨域的解决方案介绍

html5的存储方式sessionstorage和localstorage详解

用h5的canvas做出弹幕效果

html5本地存储-web sql database的详情介绍

html5 canvas中绘制字体与图片以及图形模糊问题解决

html5和css3 实现灵动画的切换效果

更多相关阅读请进入《table》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...