Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

表格元素与非常规流

  表格元素只有在常规流中才会以表格的方式呈现,当表格元素处于常规流外时会失去了表格的一些特性。比如TD或TR元素,我们可以对其使用float,它们就会变得和普通元素一样对其。甚至还可以使用position:absolute来把一些表格元素抽取出来。
  我们来试试让TR元素浮动 <style>
tr {border:1px solid #F99;float:left;margin:10px;}
td {border:1px solid #9E9;}
</style>
<table>
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
</table>

  很明显,表格元素失去了表格自身的性质,变得和普通元素一样了。但要注意IE7上并不支持这么做

  这个例子中是对所有元素都浮动了,实际应用中这么做意义不大。但把单行或单个单元格移除常规流是有用的,比如下面的例子把一个THEAD固定下来当表头使用。
<style>
section {position:relative;}
div {height:100px;overflow-y:auto;}
table {margin-top:20px;line-height:20px;}
thead {position:absolute;top:0px;left:0px;background:#F5F5F5;}
td {border:1px solid #CCC;}
td:nth-child(1) {width:20px;}
td:nth-child(2) {width:50px;}
</style>
<section>
  <div>
    <table>
      <thead>
        <tr><td>n</td><td>v</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>壹</td></tr>
        <tr><td>2</td><td>贰</td></tr>
        <tr><td>3</td><td>叁</td></tr>
        <tr><td>4</td><td>肆</td></tr>
      <tbody>
    </table>
  <div>
<section>
  
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^