CSS表格中的行距和行距

最新推荐文章于 2024-05-13 02:38:25 发布

dingshi7798

最新推荐文章于 2024-05-13 02:38:25 发布

阅读量266

点赞数

“……我们已经在CSS 2.1中实现了每个属性，并且在我们发布时完全实现了对CSS 2.1规范的完全支持。”

如果您猜猜谁最近发表了该声明，那么您认为它来自Opera，Safari或Firefox团队是可以原谅的。他们似乎一直是最注重标准的浏览器供应商。实际上，此报价来自Microsoft的Doug Stamper，涉及Internet Explorer 8 。

Web设计师一直在要求的东西-所有主要浏览器对CSS2.1的成熟支持-实际上即将发生。在《技术时报》第185期中，我在“ 基于表的布局是下一件大事”中写了这对Web设计师意味着什么。简而言之，我说过CSS表将成为CSS页面布局的最佳工具。

对该文章有不同的反应，特别是在行距和列跨度方面。 HTML表可让您创建跨多行或多列的单元格，但是CSS表却不能提供相同的自由度。

好吧，在我对一本尚未发表，可能引起争议的关于CSS的书的研究中 ，我已经找到了如何在CSS表中模拟行和列跨度的方法。与其让您等待本书，不如让我马上向您展示这种有用的技术！

我的袖子什么都没有...

如果您有使用HTML表格构建布局的经验，那么您将熟悉td元素的colspan和rowspan属性的用法。这些属性为简单的表提供了复杂的可能性，使单元格可以跨越列和行。

CSS表缺少行或列扩展的任何概念，因此与使用表时相比，使用一个单一的布局结构更加棘手。但是，可以通过使用嵌套的CSS表来实现类似的布局。

当然，嵌套表并不是一个完美的解决方案。例如，当您想要在嵌套表中匹配单元格的尺寸时，事情可能会变得一团糟，并且多余的<div>标记实际上开始累加起来。

事实证明，在很多情况下，也可以使用表格单元格的绝对位置来模拟行和列的跨度。在此示例中，我们将使表第一行的第二个单元格跨表的两行（好像它的rowspan为2 ）。首先，让我们看一下HTML代码：

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell">
        Top left
      </div>
      <div class="rowspanned cell">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell">
        Bottom left
      </div>
      <div class="empty cell"></div>
      <div class="cell">
        Bottom right
      </div>
    </div>
  </div>
</div>

您会注意到，我们已经将表div包裹在带有class "tablewrapper"的额外div 。需要额外的div来提供CSS定位上下文，我们通过为其提供相对定位来创建它：

.tablewrapper {
  position: relative;
}

根据CSS规范，我们应该能够简单地将相对定位应用于表div ，但是当前的浏览器似乎不支持此功能。

灵巧的手和绝对的位置

现在，我们可以使用绝对定位来控制"rowspanned cell" class的div的大小和位置：

.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}

在top和bottom属性都设置为零的情况下，单元格将拉伸以填充表格的整个高度，从而模拟行跨度。根据布局的需要，您可以为top和bottom使用不同的值，甚至可以直接设置单元格的height以实现其他跨行布局。

您还需要指定单元格的宽度。通常，最简单的方法就是设置其width属性，但是根据对周围表格单元格尺寸的了解，也可以通过设置left和right做到这一点。

由于定位的单元格实际上并不跨越表格的多行，因此表格必须在其他每行中仍包含一个对应的单元格。这些单元格只是空的占位符；请注意上面HTML代码中具有"empty cell" class的div 。该单元格的功能是保持将被“跨度”单元格占用的空间，因此我们必须确保其宽度与为"rowspanned cell"指定的宽度匹配：

.cell.empty {
  width: 100px;
}

这就是全部！要完成此示例的样式表，我们只需要设置适当的display属性值，并添加一些边框即可看到发生了什么：

.tablewrapper {
  position: relative;
}
.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}

本质上，通过使用绝对定位，我们告诉浏览器：“让我处理此表格单元的布局-其余的工作都由您自己负责。” 结果如下所示：