帶表格的網格，邊框不使用表格

我想創建一個網格，允許內部的「行」具有動態高度，但同時保持每個「單元格」周圍的邊框。我想不出一種方法來做到這一點，不會涉及討厭的黑客，需要一些幫助。帶表格的網格，邊框不使用表格

下圖說明了什麼，我很之後，什麼我試過到目前爲止： http://tinypic.com/r/111mpsn/5

理想：

，因爲渲染的原因不表，但它肯定會工作
應該是IE6/IE7友好的

在此先感謝。

來源

2012-01-14 Tom

表格將是理想的解決方案，但正如您所提到的在這種情況下對您無效。

使用display: table-cell;也不適合你，因爲IE6/7不支持它。

最好的辦法是按照here的方法進行操作。實質上，您需要爲每個單元格創建一個包裝行div，並使用右邊框（或任何其他您想要的樣式），然後將它們相對放置在左側的數量等於單元格的寬度。不是一個漂亮的解決方案，但這是一個很難解決的問題。

或者，您可以製作faux columns，表格單元格的邊框（和背景，如果需要）實際上只是應用於該行並垂直重複的背景圖像的一部分。這將使HTML和CSS更加簡單明瞭，但需要將樣式映射出樣式，當您想要更改某些內容時，這可能會非常痛苦。

來源

2012-01-14 17:15:09 SimpleTouch

謝謝......我認爲你提供的鏈接是我所追求的。我會給它一個鏡頭。 – Tom 2012-01-15 03:04:12

這是一種混亂，但它適用於IE9，FF，Chrome，& Safari（最後三個Mac版本）。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <style type="text/css"> 
     .containerDiv { 
      border-left: 1px solid black; 
      border-bottom: 1px solid black; 
      width: 903px; 
     } 
     .rowDiv { 
      border-top: 1px solid black; 
     } 
     .cellDiv { 
      border-right: 1px solid black; 
      display: table-cell; 
      width:300px; 
      padding: 4px; 
     } 
    </style> 
</head> 

<body> 
    <div class="containerDiv"> 
     <div class="rowDiv"> 
      <div class="cellDiv">This is some text.</div> 
      <div class="cellDiv">This is some text. This is some text. This is some text. This is some text.</div> 
      <div class="cellDiv">This is some text.</div> 
     </div> 
     <div class="rowDiv"> 
      <div class="cellDiv">This is some text.</div> 
      <div class="cellDiv">This is some text.</div> 
      <div class="cellDiv">This is some text. This is some text. This is some text. </div> 
     </div> 
     <div class="rowDiv"> 
      <div class="cellDiv">This is some text.</div> 
      <div class="cellDiv">This is some text. This is some text. This is some text. This is some text.</div> 
      <div class="cellDiv">This is some text.</div> 
     </div> 
     <div class="rowDiv"> 
      <div class="cellDiv">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> 
      <div class="cellDiv">This is some text.</div> 
      <div class="cellDiv">This is some text. This is some text. This is some text. </div> 
     </div> 
    </div> 


</body> 
</html>

的竅門是在.cellDiv的div設置爲display: table-cell。你也必須給他們一個寬度。主容器寬度比內部寬度的總和寬3個像素，以考慮邊界寬度。注意邊界如何被操縱，以便只有一條線是明顯的。

來源

2012-01-14 13:48:11 Robusto

感謝您的回答。 – Tom 2012-01-15 03:04:56

帶表格的網格，邊框不使用表格

回答

相關問題