任意寬度的 column

by thinker

關鍵字:

在 HTML 中使用 table ，有時希望能使用 $javascript$ 動態調整 column 的寬度，但卻會受限於 cell 的內容，無法任意調整大小。例如， column 會受限於長度最大的 word，無法將其大小設定在比該 word 窄。例如，你有一個 table
{{{
<table>
<tr><td>AAAA</td><td>BBBB</td></tr>
<tr><td>CCCCCCC</td><td>DDD</td></tr>
</table>
}}}
第一個 column 就會受限於 'CCCCCCC' 這個 word 的長度，寬度無法設定的比這個 word 還窄。

要解決這個問題，讓你的 column 縮放至任意大小，可以在每一個 cell 內，加一個 DIV tag，將 cell 內容包起來。
{{{
<table>
<tr><td><div>.....</div></td> .....
...
</table>
}}}
再透過設定 div 的 CSS overflow 屬性，直接隱藏超出 div 寬度的部分內容。
{{{
DIV {
overflow: hidden;
}
}}}
如此， div 的寬度比 word 窄時，部分的 word 的內容會被 cut ，只顯示前半部。

透過設定 column 裡的每個 cell 內的 div 寬度，column 的寬就能任意調整。但這實在很麻煩，而且 table 很大時， $javascript$ 要花很多 CPU time ，造成使用者等待。

== 寬度設零 ==
為了這個問題，我嘗試了幾個方法，後來找到一個比較有效率的方式。如同前面的方法，每個 cell 都加上一層 div ，將 cell 內容包住。但將 CSS 的設定改為，
{{{
DIV {
width: 0px;
overflow: visible;
}
}}}
將 width 設為 0 ，overflow 為 visible 時，DIV 和其內容雖然沒有寬度，但實際上卻會顯示。如:
{{{
<div>abcd</div>1234
}}}
你會發覺，abcd 和 1234 會被重疊在一起。這是因為 1234 被接在 abcd 後面，但 abcd 的寬度是 0，而使的 1234 和 abcd 在同一個位置一起被列印出來。

另外我們設定 TD 的 overflow，使之隱藏超過 TD 寬度的部分。
{{{
TD {
overflow: hidden;
}
}}}

由於所有 DIV 的 width 都設為 0，因此每個 column 一開始都會是寬度 0 。此時，所有 cell 內容的寬度都是 0 ， 所以 $javascript$ 只需調整第一個 row  ，每一個 cell 的 div 寬度，就能任意調整 column 寬度。

== 原因 ==
使用這個方法時，除了第一個 row，其它 row 的 div 寬度都是 0，因此不會有最小寬度限制。又因為 DIV 的 overflow 設為 visible，就算 DIV 的寬度是 0px ，內容還是能被顯示。 $javascript$ 設定第一個 row 的 div 寬度後，第一個 row 的 div 永遠會是同一個 column 裡面最寬的 (其它都是 0)，因此 column 的寬度會受第一個  row 的 div 控制。如此，就做到任意寬度的控制。

最後更新時間: 2007-01-21 01:33:18 CST | 引用

查詢:

COMMENTS: