曲径通幽论坛

标题: 表格样式 [打印本页]
作者: beyes    时间: 2015-12-25 11:45
标题: 表格样式
table { table-layout:fixed }
看下面代码：

  1. <table border="1">
  2.           <caption> 曲径通幽技术论坛 </caption>
  3.             <tr>
  4.                 <td> [url]http://www.groad.net[/url] </td>
  5.             <td> 学习与分享 </td>
  6.         </tr>
  7.   </table>
复制代码

效果：
[attach]4259[/attach]


默认的表格，单元格会随着你里头输入的内容而相应增大以恰好容纳它们。

再修改一下网址那行 <td> ，将其改为 <td width=30> ，会发现并没有限制住，单元格还是能自适应的增大。


因此得出一个结论，在没有其它限制的情况下，为表格设置宽度没意义。

如果想限制表格宽度，那么需要使用上述的 table-layout:fixed 。修改代码如下：
  1.         <style type="text/css">
  2.                 td {table-layout:fixed; }
  3.     </style>


  6.   <table border="1">
  7.           <caption> 曲径通幽技术论坛 </caption>
  8.             <tr>
  9.                 <td width="260"> [url]http://www.groad.net[/url] </td>
  10.             <td> 学习与分享 </td>
  11.         </tr>
  12.   </table>
复制代码


这样，就对第 1 个单元格进行了限定，效果如下图：
[attach]4260[/attach]

上面的代码作为演示，实际上现在并不推荐直接在 <td> 标签里指定单元格宽度，而应该统一的放在 css 里去描述。

table-layout 可以作用在行，列，和 单元格上。

caption-side 表格标题的设置


比如我可以将表格的标题放在表格的下边，此时可用该属性值来指定，如  caption-side:bottom ，如下图所示：
[attach]4261[/attach]

也可以定义在左右两边，但不同的浏览器对此的解析有所差异，这里就不逐一演示了。

border-collapse 控制表格的边框

这个样式已经在 《 单线表格的实现（border-collapse: collapse/separate）》里说明过，在此不赘述。


border-spacing 设定相邻单元格边框间的距离

查看下面代码：
  1. <style type="text/css">
  2.                 .t { border-spacing:10px 60px;}
  3.     </style>

  5. </head>

  7. <body>
  8.         
  9.   <table border="1" class="t" >
  10.           <caption> 曲径通幽技术论坛 </caption>
  11.             <tr>
  12.                 <td> [url]http://www.groad.net[/url] </td>
  13.             <td> 学习与分享 </td>
  14.         </tr>
  15.   </table>
  16.         

  18. </body>
复制代码

效果图：
[attach]4262[/attach]

上面代码中，10px 表示 X 轴的间距；60px 表示 Y 轴的间距。


empty-cells 隐藏或显示单元格

属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。考察下面代码：
  1. <table border="1" class="t" >          <caption> 曲径通幽技术论坛 </caption>
  2.             <tr>
  3.                 <td> [url]http://www.groad.net[/url] </td>
  4.             <td> 学习与分享 </td>
  5.             <td width="60">  </td>
  6.         </tr>
  7.   </table>
复制代码

效果图：
[attach]4263[/attach]

这里有个空的单元格，可以通过上述属性将其隐藏：
  1. <style type="text/css">
  2.                 .t { border-spacing:10px 60px; empty-cells:hide;}
  3.     </style>

  5. </head>

  7. <body>
  8.        
  9.   <table border="1" class="t" >
  10.           <caption> 曲径通幽技术论坛 </caption>
  11.             <tr>
  12.                 <td> [url]http://www.groad.net[/url] </td>
  13.             <td> 学习与分享 </td>
  14.             <td width="60">  </td>
  15.         </tr>
  16.   </table>
  17.        

  19. </body>
复制代码

效果图：
[attach]4264[/attach]

如果想将其显示出来，就将 hide 改为 show　即可。

下面介绍一种表格的操作效果。 跟超链接一样，当鼠标悬停到单元格或行上时（hover）所显示的效果，比如：


  3.         <style type="text/css">
  4.                 .t { border-spacing:10px 60px; empty-cells:hide;}
  5.                 .t tr:hover{color:red;}
  6.     </style>

  8. </head>

  10. <body>
  11.        
  12.   <table border="1" class="t" >
  13.           <caption> 曲径通幽技术论坛 </caption>
  14.             <tr>
  15.                 <td> [url]http://www.groad.net[/url] </td>
  16.             <td> 学习与分享 </td>
  17.             <td width="60">  </td>
  18.         </tr>
  19.   </table>
  20.        

  22. </body>
复制代码

此时，当你的鼠标悬停到行上时，单元格中的字体显示为红色。




欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2