爲什麼max-height不適用於表格？

我希望表的父容器可以根據表的高度進行擴展。我試圖設置height:auto;父容器，但它沒有工作。爲什麼max-height不適用於表格？

我的目標是保持桌子的形狀爲正方形和根據桌子的高度展開容器的高度。
以下是我的嘗試：

HTML

<div class="jumbotron playground" style="background-color: #1b6d85;"> 
    <div class="boardContainer" style="background-color: #2b542c;"> 
     <table id="boardGrid" class="table table-bordered"> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </table> 
    </div> 
</div>

CSS

.playground { 
    margin-top: -20px; 
    margin-bottom: 0; 
    height: auto; 
} 
.boardContainer { 
    height: auto; 
} 
#boardGrid { 
    margin: 0 auto; 
    max-width: 620px; 
    max-height: 620px; 
} 
#boardGrid td { 
    width: 33.33%; 
    height: 33.33%; 
    vertical-align: middle; 
    cursor: pointer; 
} 
.comments { 
    height: 200px; 
} 
@media (min-width: 768px) { 
    .boardContainer { 
     margin-left: 15%; 
     margin-right: 15%; 
    } 
} 
@media (min-width: 992px) { 
    .scoreboard { 
     position: fixed; 
     right: 10px; 
    } 
    .playground { 
     margin-top: 35px; 
    } 
    .boardContainer { 
     margin-left: 20%; 
     margin-right: 20%; 
    } 
} 
@media (min-width: 1200px) { 
    .boardContainer { 
     margin-left: 25%; 
     margin-right: 25%; 
    } 
}

來源

2017-02-09 Ayan

將這項工作的嗎？ https://jsfiddle.net/wb4ovbsb/2/

.playground { 
    margin-top: 0px; 
    margin-bottom: 0; 
    height: auto; 
} 
.boardContainer { 
    height: 0; 
    width:100%; 
    padding-bottom:100%; 
    margin: auto; 
    position:relative; 
} 
#boardGrid { 
    margin: 0 auto; 
    max-width: 620px; 
    max-height: 620px; 
} 
#boardGrid td { 
    width: 33.33%; 
    height: 33.33%; 
    vertical-align: middle; 
    cursor: pointer; 
} 
.comments { 
    height: 200px; 
} 
.strecher{position:absolute; top:0; bottom: 0; right:0;left:0;} 
table{width:100%; text-align:center; height:100%; vertical-align: middle; } 
@media (min-width: 768px) { 
    .boardContainer { 
     width: 70%; 
     padding-bottom:70%; 
    } 
} 
@media (min-width: 992px) { 
    .scoreboard { 
     position: fixed; 
     right: 10px; 
    } 
    .playground { 
     margin-top: 35px; 
    } 
    .boardContainer { 
     width: 60%; 
     padding-bottom:60%; 
    } 
} 
@media (min-width: 1200px) { 
    .boardContainer { 
     width: 50%; 
     padding-bottom:50%; 
    } 
}*emphasized text*

來源

2017-02-09 08:14:33

表didnt擴大。 – Ayan

ok我以爲你只想要綠色的div來擴大 –

不，我希望桌子通過不同的視口呈方形，因此包含的div可以根據桌子的高度進行擴展。 – Ayan

爲什麼max-height不適用於表格？

回答

相關問題