Is a grid possible with elements representing rows in CSS?

问题

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

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.

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.

Is there any way in CSS to achieve this?

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>

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:

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.

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>

Old, not working in Chrome

How about a little pseudo-element magic?

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>

回答2:

You can overcome the styling issue with some trick. Here is an example where I rely on pseudo element to style a row:

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

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  position: relative;
  z-index: 0;
  padding: 5px;
}

.cell span {
  background: orange;
  color: #fff;
  border-radius: 10px;
  padding: 2px 4px;
}

.cell:first-child {
  padding: 10px 5px 20px;
  width: 50%;
}

.cell:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 10px;
  background: #fff;
  border: 1px solid grey;
}

.cell:first-child:before {
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background:#fff;
  box-shadow: -1px 0 6px;
}

.cell:last-child:before {
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  box-shadow: 1px 0 6px;
}

.cell:nth-child(2) {
  text-align: center;
  z-index: 1;
}

.cell:nth-child(2):before {
  border-right: 0;
  border-left: 0;
  box-shadow: 0 0 6px;
}

.cell:nth-child(2):after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 11px;
  left: -5px;
  right: -5px;
  background: 
   linear-gradient(green,green) left 5px top 50%/ 2px 80% no-repeat,
   linear-gradient(green,green) right 5px top 50%/ 2px 80% no-repeat,
  #fff;
  z-index: -1;
}

body {
  background: #f3f3f3;
}

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

回答3:

Grids rows with box shadow

To fix the box-shadow instead of creating one grid with elements.
I create one grid for each row.
This was lets us create the rows size function.
While still holding getting the one row elements to apply a box shadow onto.

body {
  background-color: #eee;
}

.container {
  width: 100%;
}

.row {
  display: grid;
  grid-template-columns: 1fr 150px 200px;
  width: 100%;
  /* box-shadow: 0px 0px 0px 1px #222; */
  margin: 10px 0px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px 0px #222;
}

.name {}

.status {
  position: relative;
  text-align: center;
  width: 150px;
}

.status:before {
  content: "";
  position: absolute;
  display: inline-block;
  border-left: 2px solid #aaa;
  height: calc(1em + 20px);
  left: 0;
  top: 5px;
}

.status:after {
  content: "";
  position: absolute;
  display: inline-block;
  border-left: 2px solid #aaa;
  height: calc(1em + 20px);
  right: 0;
  top: 5px;
}

.decoration {
  width: 100%;
  padding: 2px 30px;
  border-radius: 50px;
}

.decoration.error {
  background-color: tomato;
}

.date {
  text-align: center;
}

.container .row div {
  background-color: white;
  padding: 15px;
}

.container .row div:first-of-type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.container .row div:last-of-type {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

<div class="container">
  <div class="row">
    <div class="name">
      Lee Wong
    </div>
    <div class="status">
      <span class="decoration error">
      error
      </span>
    </div>
    <div class="date">
      12/5/2020
    </div>
  </div>
  <div class="row">
    <div class="name">
      Lee Wong
    </div>
    <div class="status">
      <span class="decoration error">
      error
      </span>
    </div>
    <div class="date">
      12/5/2020
    </div>
  </div>
  <div class="row">
    <div class="name">
      Lee Wong
    </div>
    <div class="status">
      <span class="decoration error">
      error
      </span>
    </div>
    <div class="date">
      12/5/2020
    </div>
  </div>

</div>

来源：https://stackoverflow.com/questions/54347078/is-a-grid-possible-with-elements-representing-rows-in-css