CSS 10 表格

示例 1 : 

表格布局

属性:table-layout
automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果

<style>
table.t1{
  table-layout:automatic;
}
 
table.t2{
  table-layout:fixed;
}
 
</style>
 
<table class="t1" border="1" width="100%">
   <tr>
      <td width="10%">abcdefghijklmnopqrstuvwxyz</td>
      <td width="90%">abc</td>
   </tr>
</table>
 
<table class="t2" border="1" width="100%">
   <tr>
      <td width="50px">abcdefghijklmnopqrstuvwxyz</td>
      <td >abc</td>
   </tr>
</table>

 示例 2 : 

表格边框

属性：border-collapse
值：
separate:边框分隔
collapse:边框合并

<style>
table.t1{
  border-collapse:separate;
}
 
table.t2{
   border-collapse:collapse;
}
 
</style>
 
<table class="t1" border="1" width="200px">
   <tr>
      <td width="50%">边框分离</td>
      <td width="50%">边框分离</td>
   </tr>
</table>
 
<br/>
<br/>
 
<table class="t2" border="1" width="200px">
   <tr>
      <td width="50%">边框合并</td>
      <td width="50%">边框合并</td>
   </tr>
</table>