关注我们

CSS - table-layout属性

CSS还提供了 table-layout 属性，以使您的表加载更快。以下是一个例子-

<table style="table-layout:fixed;width:600px;">
   <tr height="30">
      <td width="150">CSS table layout cell 1</td>
      <td width="200">CSS table layout cell 2</td>
      <td width="250">CSS table layout cell 3</td>
   </tr>
</table>

使用传统的HTML，浏览器必须在最终呈现表之前计算每个单元格。但是，当您将表格布局算法设置为 fixed 固定时，它只需要在呈现整个表格之前先查看第一行。这意味着您的表将需要具有固定的列宽和行高。

样本列布局

以下是使用CSS创建简单列布局的步骤-设置完整文档的边距和填充，如下所示:

<style style="text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

现在，无涯教程将定义一个黄色的列，然后，将这个规则附加到<div>-

<style style="text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

到目前为止，将拥有一个带有黄色主体的文档，因此现在在level0内定义另一个分区-

<style style="text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

现在，将在level1内再嵌套一个分区，并且将仅更改背景颜色(background color)-

<style style="text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

最后，将使用相同的技术，在level2内嵌套一个level3分区，以获取右列的视觉布局-

无涯教程网

<style style="text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

如下完成源代码-

复制代码

<style style="text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id="level0">
      <div id="level1">
         <div id="level2">
            <div id="level3">
               <div id="main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>