用CSS表示行的元素是否可以形成网格？ [英] Is a grid possible with elements representing rows in CSS?

问题描述

我正在尝试针对现代浏览器使用HTML / CSS复制此设计：

I'm trying to replicate this design using HTML/CSS for modern browser:

从本质上讲，它是一个具有行和列的表，这意味着如果行的名称单元变大，则所有这些人的名称单元都应该变大。我看到了两种可能性：表格和CSS网格。

It's essentially a table, with rows and columns, that means if the name cell for a row becomes bigger, it should become bigger for all of them. I see two possibilities: tables and CSS grid.

表格中的行据我所知尚不够样式化，它们不能为例如，我还没有尝试过框阴影。

Rows in tables, as far as I can see, are not stylable enough, they can't take a border radius for example, I haven't tried box shadow.

如果使用CSS网格，则可以设置单元格的样式以模拟边界半径，但是框阴影可以

If I use a CSS grid, I can style the cells to simulate border radius at the end, but then the box shadow becomes impossible because the box shadow of the second cell covers the first one.

我认为问题归结为具有代表样式行但仍在每个行内的元素，单元格的宽度应与其他行的宽度相同，以表示列。

I think the problem boils down to having elements that represent rows for styling but still inside each of them, the cells should be the same width as in the other rows, to represent columns.

CSS中有什么方法可以实现这一点？

Is there any way in CSS to achieve this?

例如，这是尝试使用HTML的表来实现的，其中边距和边框半径无效：

For example, here's an attempt to do it with HTML's table in which the margin and border radius have no effect:

table {
  border-collapse: collapse;
}

tr {
  background-color: grey;
  border-radius: 8px;
  margin: 10px;
}

<table>
  <tr>
    <td>Eva Lee</td>
    <td>Call back</td>
    <td>15/02/19</td>
  </tr>
  <tr>
    <td>Evelyn Allen</td>
    <td>Call back</td>
    <td>14/01/19</td>
  </tr>
  <tr>
    <td>Slawomir Pelikan</td>
    <td>Voicemail</td>
    <td>14/01/19</td>
  </tr>
  <tr>
    <td>Christopher Walken</td>
    <td>Voicemail</td>
    <td>14/01/19</td>
  </tr>
</table>

这是另一种尝试，使用 display：table ，其作用与 table 相同：

Here's another attempt, using display: table, which acts the same as table:

.table {
  display: table;
  border-collapse: collapse;
}

.row {
  display: table-row;
  background-color: grey;
  border-radius: 8px;
  margin: 10px;
}

.cell {
  display: table-cell;
}

<div class="table">
  <div class="row">
    <div class="cell">Eva Lee</div>
    <div class="cell">Call back</div>
    <div class="cell">15/02/19</div>
  </div>
  <div class="row">
    <div class="cell">Evelyn Allen</div>
    <div class="cell">Call back</div>
    <div class="cell">14/01/19</div>
  </div>
  <div class="row">
    <div class="cell">Slawomir Pelikan</div>
    <div class="cell">Voicemail</div>
    <div class="cell">14/01/19</div>
  </div>
  <div class="row">
    <div class="cell">Christopher Walken</div>
    <div class="cell">Voicemail</div>
    <div class="cell">14/01/19</div>
  </div>
</div>

推荐答案

编辑1

此功能可用于FF，Chrome，MSIE，MS Edge。

Edge可能需要稍作调整，因为表格单元格具有子像素宽度，所以如果现在给出像素宽度，则会导致烦人的竖线。

Edit 1

This works in FF, Chrome, MSIE, MS Edge.
The Edge might need a little tweaking, as the table cells have sub pixel width, if now pixel width is give, leading to annoying vertical bars.

这可以通过对 div 包裹单元格的内容和溢出：隐藏在单元格上的。

This works through using negative margins on divs which wrap the cells content and overflow: hidden on the cells.

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table tr td {
  overflow: hidden;
  padding: 0 0 5px 0;
}
table tr td > div {
  background-color: gold;
  padding: 4px;
  border-radius: 0px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 14px;
  padding-right: 14px;
}
table tr td:first-child {
  padding-left: 10px;
}
table tr td:first-child > div {
  border-radius: 10px 0 0 10px;
}
table tr td:last-child {
  padding-right: 20px;
}
table tr td:last-child > div {
  border-radius: 0 10px 10px 0;
}

<table>
  <tr>
    <td>
      <div>Lorem.</div>
    </td>
    <td>
      <div>Ea!</div>
    </td>
    <td>
      <div>Animi.</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Quas!</div>
    </td>
    <td>
      <div>Dolor!</div>
    </td>
    <td>
      <div>Suscipit.</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>Mollitia?</div>
    </td>
    <td>
      <div>Inventore!</div>
    </td>
    <td>
      <div>Dolorem.</div>
    </td>
  </tr>
</table>

伪元素魔术怎么样？

table {
  border-spacing: 10px;
  border-collapse: separate;
}

tr {
  position: relative;
  margin: 10px;
}
tr:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gold;
  z-index: -1;
  border-radius: 20px;
  box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.25);
}

td {
  padding: 10px;
}

<table>
  <tr>
    <td>Eva Lee</td>
    <td>Call back</td>
    <td>15/02/19</td>
  </tr>
  <tr>
    <td>Evelyn Allen</td>
    <td>Call back</td>
    <td>14/01/19</td>
  </tr>
  <tr>
    <td>Slawomir Pelikan</td>
    <td>Voicemail</td>
    <td>14/01/19</td>
  </tr>
  <tr>
    <td>Christopher Walken</td>
    <td>Voicemail</td>
    <td>14/01/19</td>
  </tr>
</table>

这篇关于用CSS表示行的元素是否可以形成网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！