2013-01-21 357 views
1

樣式化動態生成的表格時遇到問題。用戶可以選擇有多少列,其中一些列具有固定的長度。我怎樣才能讓其他人給出剩餘空間的百分比,而不必每次都指定列的確切寬度,而不用不同的數據/不同瀏覽器的不同列寬?HTML表格樣式

實施例:

<style type="text/css"> 
table{ 
    width:800px; 
    border:1px solid #CCCCCC; 
    /* table-layout: fixed; */ 
} 

table td { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    border:1px solid #EEEEEE; 
} 

table tbody td.active{ 
    text-align:center; 
    width:100px; /* fixed */ 
} 

table tbody td.option{ 
    width:100px; /* fixed */ 
} 


table tbody td.nonfixed{ 
    width:auto; 
} 
</style> 
<table> 
    <thead> 
     <tr> 
      <td>Name</td> 
      <td>Description</td> 
      <td>Active</td> 
      <td colspan="2">Options</td> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <td colspan="5"><a href="">+ Add new row</a><td> 
     </tr> 
    </tfoot> 
    <tbody> 
     <tr> 
      <td class="nonfixed">[Name 1]</td> 
      <td class="nonfixed">[Description 1]</td> 
      <td class="active">[X]</td> 
      <td class="option">Edit</td> 
      <td class="option">Delete</td> 
     </tr> 
     <tr> 
      <td class="nonfixed">[Name 2]</td> 
      <td class="nonfixed">[Description 2]</td> 
      <td class="active">[0]</td> 
      <td class="option">Edit</td> 
      <td class="option">Delete</td> 
     </tr> 
    </tbody> 
</table> 

在該示例中兩個「非固定」列應具有完全相同的寬度。當用戶添加一個不固定的列或將第一列與最後一列切換時,這也應該起作用。

誰能幫助我?

+0

這是幾乎可以肯定的是,你將需要JavaScript來解決這個問題。你在那方面嘗試過什麼? –

+0

解決此問題時出現以下問題:http://stackoverflow.com/questions/14444436/html-table-thead-width-depending-on-tbody-in-chrome – Simon

回答

1

我看到兩種可能的方法......無論是使用腳本來計算靈活的寬列的寬度,並取它們的平均值,或者使用嵌套表在50%拆分兩個彎曲的cols:

<table> 
    <tr> 
    <td class="fixed"></td> 
    <td class="fixed"></td> 
    <td class="fixed"></td> 

    <td class="flex-wrapper"> 
     <table width="100%"> 
     <tr> 
      <td width="50%"></td> 
      <td width="50%"></td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 
+0

當我申請「table td.nonfixed { 寬度:100%; }「這適用於元素。唯一的問題是,Chrome確實需要這些元素具有寬度。 – Simon

+0

在父表上?你可以使用寬度:自動;? – isherwood

+0

這不起作用。當我刪除thead,我得到期望的結果... – Simon