IE9嵌套表填充高度的父td

我試圖嵌套表，我想要嵌套表的高度等於其容器的高度。IE9嵌套表填充高度的父td

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <table> 
       <thead> 
        <tr> 
         <th>Col 1</th> 
         <th>Col 2</th> 
         <th>Col 3</th> 
         <th>Col 4</th> 
         <th>Col 5</th> 
         <th>Col 6</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>a</td> 
         <td>b</td> 
         <td>c</td> 
         <td class="has-nested-table"> 
          <table> 
           <tbody> 
            <tr> 
             <td>d</td> 
             <td>e</td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
         <td>f</td> 
         <td>g</td> 
        </tr> 
        <tr> 
         <td>h</td> 
         <td>i</td> 
         <td>j with some other letters because he has been so lonely lately</td> 
         <td class="has-nested-table"> 
          <table> 
           <tbody> 
            <tr> 
             <td>k</td> 
             <td>l</td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
         <td>m</td> 
         <td>n</td> 
        </tr> 
        <tr> 
         <td>o</td> 
         <td>p</td> 
         <td>q</td> 
         <td class="has-nested-table"> 
          <table> 
           <tbody> 
            <tr> 
             <td>r</td> 
             <td>s</td> 
            </tr> 
            <tr> 
             <td>t</td> 
             <td>u</td> 
            </tr> 
            <tr> 
             <td>v</td> 
             <td>w</td> 
            </tr> 
           </tbody> 
          </table> 
         </td> 
         <td>x</td> 
         <td>y</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

和這裏的CSS * { 保證金：0; 提綱：0; 填充：0 }

html, body 
{ 
    font:normal 11px/1.4 Helvetica, Arial, Sans-Serif; 
    height:100% 
} 

.wrapper 
{ 
    margin:0 auto; 
    padding:0 10px; 
    width:940px 
} 

table 
{ 
    border-collapse:collapse; 
    height:100%; 
    table-layout:fixed; 
    width:100% 
} 

    thead 
    { 
     background:#595959; 
     border:1px solid #595959 
    } 

    tbody, tr 
    { 
     height:100% 
    } 

     th 
     { 
      color:#f5f5f5 
     } 

     th, td 
     { 
      padding:5px 
     } 

     td 
     { 
      border:1px solid #ccc; 
      text-align:center; 
      vertical-align:top 
     } 

     td.has-nested-table 
     { 
      padding:0 
     } 

      td table 
      { 
       height:100% 
      } 

      td td 
      { 
       border-bottom:0; 
       border-left:0; 
       border-top:0; 
       vertical-align:top 
      } 

      td td:last-child 
      { 
       border:0 
      }

嵌套表中Firefox和鉻擴大而不是在IE9。幫幫我！

來源

2013-12-18 dork

添加這個CSS，然後嘗試

td.has-nested-table table{ 
    height: auto; 
}

來源

2013-12-18 04:26:36

的問題是，要指定邊境

td td {

和文字發生在連接柱在

需要更多空間

<td>j with some other letters because .... </td>

嵌套表將不會展開，因爲它只有一行。

因此，要解決這個問題，除了@Harshit回答你的需要添加

td td { border: 0px; }

檢查http://jsfiddle.net/raunakkathuria/8UxbS/

做工精細的IE瀏覽器，看起來好多了，如果邊界不是嵌套表重要，但如果需要邊界，那麼你需要添加rowspan和東西，但那不會是充分證明

來源

2013-12-18 04:52:42

不幸的是，我需要那些邊界 – dork

想不到任何東西，你可以使表格佈局：汽車，但會拉伸lon g列。 –

將tbody，tr {height：100％}更改爲高度：自動適用於firefox，現在也可以使用邊框，但IE仍然不能正常工作，您可以試試http://jsfiddle.net/raunakkathuria/8UxbS/1/ –

IE9嵌套表填充高度的父td

回答

相關問題