2009/01/20

table-layout

table-layout

指定報表佈局的規則,可設為:

  1. auto:由直行的數個小方格中,以最寬的小方格的寬度為準。此為預設值。
  2. fixed:報表的寬度,以設定的寬度為準,或以第一橫欄的寬度為準。此法展現速度較快。
  3. inherit:繼承父元件的特徵值。
  • 風格用法:

    <style type='text/css'>
    .tbl { width:45px; border-collapse: separate}
    .tbl TD { border:red solid 1px}
    </style>
    <table class='tbl' style='table-layout:fixed'>
    <tr><td>11.4
    <tr><td>0.8
    <tr><td>100.345
    </table>
    <br />
    <table class='tbl' style='table-layout:auto'>
    <tr><td>11.4
    <tr><td>0.8
    <tr><td>100.345
    </table>

  • 執行結果:

    11.4
    0.8
    100.345

    11.4
    0.8
    100.345
  • 第二個報表設了 table-layout:auto,內容會決定寬度。

javascript 應用。可以用 style 物件 的特徵 tableLayout 讀取或設定特徵值。

  • 風格用法:

    <table id='atr7' style='table-layout:fixed'>
    <tr>
      <td>射擊遊戲
      <td>好玩遊戲
    </table><p>
    <script type='text/javascript'>
    var os=document.getElementById('atr7').style;
    document.write( os.tableLayout );
    </script>

  • 執行結果:

    射擊遊戲 好玩遊戲

    fixed