使用 css display:table + sass 实现这个 html 表的优雅方法是什么？答案

【问题标题】：what is an elegant way to implement this html table using css display:table + sass?使用 css display:table + sass 实现这个 html 表的优雅方法是什么？
【发布时间】：2017-02-16 03:52:10
【问题描述】：

使用 css display:table + sass 定义这个 html 表格的优雅方式是什么？我已经使用带有 display:table css 样式的 div 定义了一个表格布局：

    <div style="display:table">
        {{#definitions}}
        <div style="display:table-row">
            <div style="display:table-cell">{{key}}</div>
            <div style="display:table-cell">{{value}}</div>
        </div>
        {{/definitions}}
    </div>

上面的例子是一个用于数据绑定的小胡子模板。我需要将样式参考移至 sass。什么是一种优雅的方式来做到这一点？

【问题讨论】：

如果您投反对票，请附上说明原因的评论
你为什么不直接使用普通的<table>？您可以使用<table> 来显示数据，但不要将它们用于布局。我没有投反对票。
为什么不能像其他任何元素一样为元素分配一个类？这和 SASS 有什么关系？
我需要将样式引用与 html 分开。 Sass 提供了一些额外的功能来以更优雅的方式构建 css。我想知道 sass 是否为我正在尝试做的事情提供了一个优于 vanilla css 的良好捷径。
我认为您需要向我们展示您的尝试，因为这在 CSS 或 SASS 中应该非常简单。也许我错过了什么。

标签： javascript html css sass mustache

【解决方案1】：

也许我误解了您的要求，但您可以在外部元素上使用单个类来执行此操作，然后在每个级别使用 > 定位子元素，以便为您提供行和单元格：

.display-table {
  display: table;

  >div {
    display: table-row;

    >div {
      display: table-cell;
    }
  }
}

这将生成以下 CSS...

.display-table {
  display: table;
}
.display-table > div {
  display: table-row;
}
.display-table > div > div {
  display: table-cell;
}

<div class="display-table">
  <div>
    <div>{{key}}</div>
    <div>{{value}}</div>
  </div>
</div>

【讨论】：

是的，这是正确的，或者您可以只使用<table> 而不必写任何这些哈哈。我认为对于屏幕阅读器和网络爬虫来说也会更好
@zgood 也许 OP 正在利用 display: table 的表示能力，而不是显示表格数据。在这种情况下，绝对应该不使用<table>。
他正在显示{{key}} {{value}} 对，这是数据
这是我的场景：用户将单击“报告类型”选择器旁边的帮助按钮。这将依次打开一个弹出窗口，其中显示“报告类型”选项的帮助信息的键/值。我想这是表格信息。我应该在实际表中而不是在 css 表中实现它吗？