表格中的HTML表格100％高度

我有父表（我知道，我知道表...但我沒有選擇:(）其中有一行..它包含2個單元格，每個單元格都有它自己的表格。我希望它們都保持相同的高度，以便無論內容有多少都能保持邊界對齊（它們具有靈活的內容量，因此無法設置）

如果您將下面的代碼並將其轉儲到您將看到的HTML文件中（至少在Chrome中），正確的子表不會填充其所在單元格的100％。如果在父表格上刪除「height：auto」，則它確實工作，但它也使父表100％的身高..

這兩件事爲什麼會相互影響？

<style> 
.cl2_h { background:red; } 
.cl1_h { background:blue;} 
.cl1, .cl2{ width:100%; border:1px solid black;} 
table, tbody { height:100%; } 
</style> 


<table style="border:1px solid red;height:auto;"> 
<tbody> 
<tr style="height:100%;"> 
    <td style="width:50%"> 
     <table class="cl2" style="text-align:left;"> 
      <tbody> 
       <tr class="cl2_h"> 
        <td> 
         RANDOM TEXT HERE 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <span>Select which asd asdthis item relates to.</span> 
         <ul> 
          <li> 
           <select> 
            <option value="-1">Please Select...</option> 
           </select> 
          </li> 
          <li> 
           <select> 
            <option value="302">Please Select...</option> 
           </select> 
          </li> 
         </ul> 
         SOME RANDOM TEXT 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
    <td> 
     <table class="cl2" style="height:100%"> 
      <tbody> 
       <tr class="cl2_h"> 
        <td> 
         asd asd asd asda sda(NTF) 
        </td> 
       </tr> 
       <tr> 
        <td> 
         DROPDOWNLIST Here 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </td> 
</tr> 
</tbody> 
</table>

東西值得注意的是，如果我父設置爲200像素，然後繼續工作...所以我想真正的問題是，爲什麼沒有「自動」高度的父表內工作時

來源

2011-08-12 Steve

爲什麼你別無選擇？遺產代碼？ –

你可以做到這一點使用Javascript/jQuery的：

來源

2011-08-12 16:05:32 RobB

史蒂夫，「高度：汽車」不告知瀏覽器在時間呈現什麼含表的最終高度將讓100％在子表上語法上是多餘的。

只有當您向父容器指定高度（或不給高度）的css時，孩子纔會知道「100％」在呈現時的含義。

如果你必須在父表上保留height：auto，那麼@RobB有一個很好的javascript解決方案，但是我會建議爲父表設置一個特定的高度，或者如果你可以幫它設置一個高度。

來源

2011-08-12 16:12:46 matthewdunnam

表格中的HTML表格100％高度

回答

相關問題