HTML CSS Reference/CSS Attributes and Javascript Style Properties/table layout

Материал из Web эксперт
Перейти к: навигация, поиск

"table-layout" Example

    
<html>
<body>
<table style="table-layout:fixed" width="400" border>
   <col width="150">
   <col width="300">
   <col width="200">
   <thead height="20">
   <tr>
      <th>150px wide column</th>
      <th>300px wide column</th>
      <th>200px wide column</th>
   </tr>
   </thead>
   <tr height="20"> 
      <td>Cell 1 content</td>
      <td>Cell 2 content</td>
      <td>Cell 3 content</td>
   </tr>
</table>
<table style="table-layout:auto" width="400" border>
   <col width="150">
   <col width="300">
   <col width="200">
   <thead height="20">
   <tr>
      <th>150px wide column</th>
      <th>300px wide column</th>
      <th>200px wide column</th>
   </tr>
   </thead>
   <tr height="20"> 
      <td>Cell 1 content</td>
      <td>Cell 2 content</td>
      <td>Cell 3 content</td>
   </tr>
</table>
</body>
</html>



"table-layout" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |currentStyle                    runtimeStyle                  |
|                |style                           <table>                       |
+----------------+--------------------------------------------------------------+



"table-layout" Possible Values

Possible Values
auto       The default; content in the column determines column width

fixed      The value of the width property determines column width



"table-layout" Syntax and Note

Syntax:
    
table { table-layout: value }
elementID.style.tableLayout = "value"
document.all.elementID.style.tableLayout = "value" // IE only
Источник — «http://wbex.ru/index.php?title=HTML_CSS_Reference/CSS_Attributes_and_Javascript_Style_Properties/table_layout&oldid=6067»