一个简单的响应式电子表格的构思

如何在不使用任何 JavaScript 的情况下使电子表格式界面具有响应性？这周我一直在思考这个问题，因为我一直在做一个新项目，并试图弄清楚如何制作最简单的电子表格。我想避免使用框架，而是决定尝试一些新属性，以便只使用少量的 CSS。

剧透！这是我目前想到的（请注意，此演示目前仅在最新版本的 Chrome 中有效）。尝试四处滚动一下

查看 CodePen 上 Robin Rendle (@robinrendle) 创建的笔 一个简单的响应式电子表格 – 最终版。

注意到第一列如何粘贴在左侧，标题如何粘贴在电子表格顶部了吗？这使我们能够扫描大量数据，而不必一直滚动以确定我们位于哪一列或哪一行——在许多这样的界面中，很容易迷失方向。

那么我是如何制作这个东西的呢？让我们开始吧！

添加标记

首先，我们需要为表格添加标记，为了确保此示例尽可能真实，我们将在此处添加许多行和列

查看 CodePen 上 Robin Rendle (@robinrendle) 创建的笔 一个简单的响应式电子表格 – 第 1 步。

这里没有什么复杂的东西。我们只有一个普通的表格，带有一个<thead>和一个<tbody>，但我们将整个表格包装在一个table-wrapper div 中，我稍后会解释。

接下来，我们将向该包装器元素添加基本样式，以将其移动到页面中心并赋予其最大宽度。我们还需要确保.table-wrapper的溢出设置为滚动，尽管在较大的屏幕尺寸下我们暂时不需要这样做

body {
  display: flex;
  font-family: -apple-system;
  font-size: 90%;
  color: #333;
  justify-content: center;
}

.table-wrapper {
  max-width: 700px;
  overflow: scroll;
}

查看 CodePen 上 Robin Rendle (@robinrendle) 创建的笔 一个简单的响应式电子表格 – 第 2 步。

不错！现在我们可以为表格的第一列和thead元素添加样式，以及为每个表格单元格添加基本样式

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}

td, th {
  white-space: nowrap;
  border: 1px solid #ddd;
  padding: 20px;
}

查看 CodePen 上 Robin Rendle (@robinrendle) 创建的笔 一个简单的响应式电子表格 – 第 3 步。

这里的问题是我们现在制作了一个难以访问的表格；虽然我们可以在电子表格中四处滚动，但我们无法读取哪一列或哪一行与哪些数据相关联。这可能导致表格几乎完全无法阅读，如果我们用真实数据填充它，情况会更糟

position: sticky 来救援！

position: sticky是一个非常方便的 CSS 技巧，我最近开始大量尝试使用它。它允许您将子元素粘贴到其父容器上，以便在您四处滚动时，子元素始终可见。这正是我们在此处用于表格元素的第一列和标题的内容。

我们可以像这样使用这个相对较新的 CSS 功能

// The heading of our table
th {
  background-color: #eee;
  position: sticky;
  top: -1px;
  z-index: 2;
  
  // The first cell that lives in the top left of our spreadsheet
  &:first-of-type {
    left: 0;
    z-index: 3;
  }
}

// The first column that we want to stick to the left
tbody tr td:first-of-type {
  background-color: #eee;
  position: sticky;
  left: -1px;
  z-index: 1;
}

这里的 z-index 值很重要，因为我们希望标题与也将是粘性的第一列左侧重叠。但是！我们还想让左上角的空单元格与我们的标题和左侧列重叠，如下所示

查看 CodePen 上 Robin Rendle (@robinrendle) 创建的笔 一个简单的响应式电子表格 – 最终版。

就是这样！一个简单的响应式电子表格，无论您在表格中的什么位置，都可以查看标题和第一列。但是，值得注意的是，您的里程可能会有所不同。position: sticky目前的支持情况参差不齐，因此在开始使用它之前，值得进行彻底的测试。或者，您可以使用类似于Stickybits的东西，它可以充当轻量级的 polyfill。

此外，如果您需要更深入地了解表格，我们制作了一个非常方便的表格元素完整指南。