100％寬度渲染的元素​​

Question

我正在佈置一個表格（是的，表格數據！），我無法理解如何確定表格單元格的寬度。對於具有100％寬度的<table>和兩個空的<td>單元，每個單元將佔用一半的空間。在<td>中添加不同的元素後，情況就會改變。但是，<td>的子元素都具有100％的寬度。我不希望這會改變單元格的寬度，但它確實如此。

例如，兩個小區在下面的代碼具有不同的寬度：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div>100%</div> 
      </td> 
      <td> 
       <input placeholder="other" type="text" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

我收集在這個jsfiddle幾個其他示例。

我的問題（一個或多個）：

1. 這究竟是爲什麼（例如爲什麼沒有列甚至？）？
2. 即使我不知道給定表格有多少列，我是否可以保持均勻大小的單元格而不考慮它們的內容？

Answer 1

您正在讓瀏覽器確定寬度，它會將包含的元素的較小值縮小爲最小值。如果你想讓你的表CSS中的所有東西都等於table-layout: fixed。

這會將列均勻分配給您。

http://jsfiddle.net/Jqqd9/6/

http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

在固定表格佈局算法中，每個列的寬度是 確定如下：

1. 與除「auto以外的值的列元素'爲'width'屬性設置該列的寬度。
2. 否則，'width'屬性'auto' 以外的第一行中的單元格將確定該列的寬度。如果 單元格跨越多個列，則將寬度分爲 列。
3. 任何剩餘的列等分剩餘的水平表格 空間（減去邊框或單元格間距）。

默認值是auto，以這種方式找到。

列寬被確定如下：

1. 計算每個單元格的最小內容寬度（MCW）：所述 格式化的內容可以跨越任何數量的行，但可能不會溢出 的電池箱。如果單元的指定「寬度」（W）比MCW大 ，則W是最小單元寬度。'auto'的值表示 MCW是最小單元寬度。 另外，計算每個單元格的「最大」單元格寬度：格式化 除了顯式行 中斷髮生之外沒有斷開行的內容。
2. 對於每一列，請確定僅跨越該列的單元格的最大和最小列寬度 。最小值是具有最大最小單元寬度的單元所需的 （或者列寬爲 '寬度'，取較大者）。最大值是 單元格所具有的最大單元格寬度（或列'寬度'， 中較大者）所需的最大值。
3. 對於跨越多個列的每個單元格，增加它跨越的列的最小寬度，以使它們一起至少與單元格一樣寬度爲 。對最大寬度做同樣的操作。如果 可能，則將所有跨列擴大約相同數量的 數量。
4. 對於「寬度」不是「auto」的每個列組元素， 會增加其跨越的列的最小寬度，因此它們至少與列組的寬度一樣寬。

Answer 2

你可以簡單的使用table-layout:fixed CSS屬性來解決這個問題， 這裏是解決方案。

http://jsfiddle.net/hbirjand/HWhp6/