Go语言视频零基础入门到精通

吴会 · 发表于 2011-7-29 21:10:19

css 表格属性答应你设置表格的布局。

实例：

设置表格的布局
本例演示如何设置表格的布局。

<HTML>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>

<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

<br />

<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

</body>
</html>

显示表格中的空单元
本例演示是否显示表格中的空单元。（请在非 IE 浏览器中浏览）

<html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td></td>
</tr>
</table>

</body>
</html>

合并表格边框
本例演示是否把表格边框显示为一条单独的边框，仍是像尺度的 html 中那样分开显示。

<html>
<head>
<style type="text/css">
table.coll
{
border-collapse: collapse
}
table.sep
{
border-collapse: separate
}
</style>
</head>
<body>

<table class="coll" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

<br />

<table class="sep" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

</body>
</html>

设置表格边框之间的空缺
本例演示如何设置单元格边框之间的间隔。（请在非 IE 浏览器中浏览）

<html>
<head>
<style type="text/css">
table.one
{
border-collapse: separate;
border-spacing: 10px
}
table.two
{
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body>

<table class="one" border="1">
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

<br />

<table class="two" border="1">
<tr>
<td>Carter</td>
<td>Thomas</td>
</tr>
<tr>
<td>Gates</td>
<td>Bill</td>
</tr>
</table>

</body>
</html>

设置表格标题的位置
本例演示如何定位表格的标题。（请在非 IE 浏览器中浏览）

<html>
<head>
<style type="text/css">
caption
{
caption-side:bottom
}
</style>
</head>
<body>

<table border="1">
<caption>This is a caption</caption>
<tr>
<td>Adams</td>
<td>John</td>
</tr>
<tr>
<td>Bush</td>
<td>George</td>
</tr>
</table>

</body>
</html>

css Table 属性

css 表格属性答应你设置表格的布局。（请留意，本节先容的不是如何使用表来建立布局，而是要先容 css 中表本身如何布局。）

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的间隔。（仅用于 "separated borders" 模型）
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。（仅用于 "separated borders" 模型）
table-layout	设置显示单元、行和列的算法。

javalearner · 发表于 2011-7-29 21:41:21

谢谢楼主分享。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

CSS 表格

浏览过的版块