table-table-layout和border-collapse: collapse的用法

来源:互联网 发布:歌曲剪切合并软件 编辑:程序博客网 时间:2024/06/05 20:20
<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>


用table-layout:fixed之后,表格的列宽固定,内容不会挤动列宽,auto则会根据内容变动列宽

table
  {
  border-collapse:collapse;
  }左边是加了border-collapse之后效果,会合并边框



阅读全文
0 0
原创粉丝点击