HTML 和 CSS 表格/网格设计

Question

我正在尝试设计下面的表格。我尝试使用 HTML 表格，但无法正确应用框阴影，因为我必须圆角第一个和最后一个 td 单元格而不是 tr （因为它不支持边框半径）但是然后对行应用盒子阴影并没有绕过弯曲的边缘，而是保持方形。

我也尝试了 display:grid & flex，但是，我可以找到一种方法来获取 box-shadow/border-radius 并在列中居中对齐文本，这是一种权衡。

所以任何建议都将不胜感激。

这是我试图转换为 HTML 和 CSS 的内容。

这是用于渲染表格 HTML 的反应代码：

<div className="policy-container">
        <div className="policy-table">
            <div className="headings">
                <span className="heading">Name</span>
                <span className="heading">Last Updated</span>
                <span className="heading">Actions</span>
            </div>

            {data.map((row, ri) => (
                <div key={ri} className="policy">
                    <span>{row.name}</span>
                    <span>{row.lastUpdated.format("Do MMM YYYY")}</span>
                    <span>
                        <a href={row.link}>view</a>
                    </span>
                </div>
            ))}
        </div>
    </div>

Answer 1

我会做这样的事情，使用 flex:

body {
  background-color: #eefbfb;
  font-family: sans-serif;
  font-size: 16px;
}

.policy-table {
  color: grey;
  text-align: center;
}

.headings, .policy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 1em;
  padding: 1em;
}

.heading {
  flex-basis: 33.333%;
  font-weight: bold;
}

.policy {
  border-radius: 2em;
  background-color: white;
  margin-bottom: 20px;
  -moz-box-shadow: 0 0 3px grey;
  -webkit-box-shadow: 0 0 3px grey;
  box-shadow: 0 0 5px grey;
}

span {
  flex-basis: 33.333%;
}

a {
  text-decoration: none;
  color: #4c4c4c;
}

<div class="policy-container">
  <div class="policy-table">
    <div class="headings">
      <span class="heading">Name</span>
      <span class="heading">Last Updated</span>
      <span class="heading">Actions</span>
    </div>

    <div class="policy">
      <span>Name</span>
      <span>DD MM YY</span>
      <span>
        <a href={row.link}>view</a>
      </span>
    </div>

    <div class="policy">
      <span>Name</span>
      <span>DD MM YY</span>
      <span>
        <a href={row.link}>view</a>
      </span>
    </div>
  </div>
</div>