如何填充表格單元的整個水平空間？

我試圖讓我的桌子上的這些div填充單元的整個空間，即使沒有足夠的內容。如何填充表格單元的整個水平空間？

如果您看到下面的內容，第一個單元格（data_cell1_lt）沒有水平填充文本，所以它會使蘋果圖像（data_cell3_lt）向左移動。

接下來的兩行文字和圖片排列完美，但這是因爲有足夠的文字填滿整個單元格。

<div class="wrapper-data"> 
    <div class="data_row"> 
     <div class="data_cell1_lt"> 
      <p>Fill the entire space.</p> 
     </div> 
     <div class="data_cell2_lt"> 
      &nbsp;</div> 
     <div class="data_cell3_lt"> 
      <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div> 
    </div> 
    <div class="data_row"> 
     <div class="data_cell1_lt"> 
      <p>Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.</p> 
     </div> 
     <div class="data_cell2_lt"> 
      &nbsp;</div> 
     <div class="data_cell3_lt"> 
      <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div> 
    </div> 
    <div class="data_row"> 
     <div class="data_cell1_lt"> 
      <p><p>Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.</p> 
     </div> 
     <div class="data_cell2_lt"> 
      &nbsp;</div> 
     <div class="data_cell3_lt"> 
      <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div> 
    </div> 
</div>

來源

2013-12-19 user3075987

給data_row的100%的寬度，它應該工作。

原因是，data_row顯示爲嵌入塊。

來源

2013-12-19 20:03:37 rybo111

是的，我知道。你爲什麼要問？ – user3075987

誤讀了一些東西。從我的答案中刪除了那一點。 – rybo111

什麼是在數據行之間添加空間的最佳實踐？ – user3075987

想要類似this的東西嗎？

我就在。數據行級

來源

2013-12-19 20:03:42

添加width: 100%;的100％的寬度添加到data_row類：

.data_row { 
    height:100%; 
    min-height:100%; 
    white-space:nowrap; 
    display:table; 
    width:100%;   
}

來源

2013-12-19 20:03:56 tjboswell

如何填充表格單元的整個水平空間？

回答

相關問題