獲取div來填滿表格單元格

這是我的使用情況：獲取div來填滿表格單元格

table { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
td { background: green; height: 300px; } 
 
div { height: 100px; background: blue; }

<table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td> 
 
      <div>2</div> 
 
      <div>2</div> 
 
     </td> 
 
     <td>3</td> 
 
    </tr> 
 
</table>

我想的div拿起表格單元格的整個部分。中間的單元不應該有綠色。

注意，我不知道小區有多大（這可能比300px更大）
，我不知道有多少DIV會有（可以有1到很多）

我想用CSS來做到這一點，而不是使用JavaScript。我將如何做到這一點？

來源

2014-09-24 qwertymk

試試這個：

CSS

table { 
    height: 100%; 
    width: 100%; 
} 
td { background: green; height: 300px; } 
div { height: inherit; background: blue; }

來源

2014-09-24 02:00:51

，只是讓每格300像素，在上述情況下我會想他們是150各，如果有三個我會想他們是100每等。 – qwertymk 2014-09-24 02:03:23

只要改變CSS的div是這樣的：有變化的高度（的td變化高度

td div { 
    height: 50%; 
    background: blue; 
    display:block 
}

See fiddle任何高度你想讓你看看它是如何工作的）

編輯：我沒有看到你會有不同數量的div在該td元素，所以方法是不同的。爲了這個目的，首先添加一個div容器，就像這樣：

table { 
    height: 100%; 
    width: 100%; 
} 
td { 
    background: green; 
    height: 600px; 
} 
.box { 
    display:flex; 
    background: blue; 
    flex-direction:column; 
    justify-content: space-around; 
    flex-flow: column wrap; 
    height:100%; 
    align-items: stretch; 
} 
.box div { 
    text-align:center; 
    height:auto; 
    flex-grow:2 
} 
.red { 
    background:#f00 
} 
.grey { 
    background:#ccc 
} 
.yello { 
    background:#fc0 
}

現在我們用一個display:flex屬性與column方向，確保了.box類（即容器div我們已經加入）是td所以100％的高度它佔據了整個高度。

見new fiddle here

來源

2014-09-24 03:05:49 Devin

獲取div來填滿表格單元格

回答

相關問題