带表格的网格，边框不使用表格

我想创建一个网格，允许内部的“行”具有动态高度，但同时保持每个“单元格”周围的边框。我想不出一种方法来做到这一点，不会涉及讨厌的黑客，需要一些帮助。带表格的网格，边框不使用表格

下图说明了什么，我很之后，什么我试过到目前为止： 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

带表格的网格，边框不使用表格

回答

相关问题