用CSS怎么把表格显示出来

html-css078

用CSS怎么把表格显示出来,第1张

CSS中显示和隐藏有多种方法,比较常见的是有display:none|blockvisibility: hidden|visible他们的区别在于,对文档流影响的区别。一般大家显示隐藏元素,比较倾向于用display。

你如果想隐藏表格,可以用table{display:none}来操作。想显示的话把display:block即可。

table: 会作为块级表格来显示(类似 <table>)

table-row: 浏览器会默认创建一个表格行(类似<tr>)

table-cell: 作为一个表格单元格显示(类似 <td>和 <th>)

具体实现

结果:

左边宽度固定,右边自适应

结果:

结果:

结果:

我们要 <div class="box">B</div>" 整个可以使用 text-align: right 属性,也就是整个B框要在红色背景的右边,需要先将他们设置 inline-block 属性

结果:

在table

中控制单元格之间的间距要用到cellspacing、cellpadding,默认情况cellspacing、cellpadding均不为0,但经

常的状况为了不让table单元格之间的间距影响到美观,我们经常会把cellspacing、cellpadding设置为0,因此经常看到“<

table

cellspacing=0

cellpadding=0>”这样的代码。这样做无形中增加了代码的体积,而且也极其不符合样式与内容分离的web标准,对于我本人来说也是极其

厌恶这样的形式的,因此使用css控制cellspacing/cellpadding显的意义重大了!以下是控制方法:

table{border:0margin:0border-collapse:collapse}

table

td{padding:0}

第一行控制cellspacing,关键是“border-collapse:collapse”这一句;第二行控制cellpadding

cellpadding

对应

td

padding

cellspacing

对应

td

margin

说的还不够清楚吗?

cellpadding,cellspacing都是废弃的属性了,早已不推荐使用,最新的html5里已经彻底去掉了这些表现型的属性。正确的做法是,合并表格边框,然后用th,td的padding设置内容和边框之间的空隙。

你想有间隔,就table

td{

padding:15px

},就可以了啊