Vertical / horizontal grids in a data table

1

Hi @nolimits4web,

Is there any style for vertical / horizontal grids in a data table? Yeah, it looks UGLY but my customer insists on it…

Thanks!

2

Sorry, what do you mean by grids in table? You mean rows/cells borders?

3

Yes. Vertical and horizontal lines in the table. I tried setting borders for td, but it doesn’t work (even with !important.

4

It works without any problems:

.data-table td {
  border-left: 1px solid #eee;
}

Снимок экрана 2020-03-31 в 15.34.16
Снимок экрана 2020-03-31 в 15.34.161896×568 41.7 KB

5

The problem was due to a var() making the rule invalid. Спасибо!

6

Just a little more help needed! In the attached (zoomed) screenshot, the horizontal line is below the table header, and the vertical one is mine solid 1px rgba(0, 0, 0, 0.12);, but the one for the header is much nicer and thinner. Can give me the exact specification for it? I cannot find it in the CSS file.
image

7

Check in inspector. Built-in borders are done with “hairlines” - they are using pseudo elements:

Снимок экрана 2020-03-31 в 19.57.47
Снимок экрана 2020-03-31 в 19.57.472606×1484 492 KB

8

WOW! Thank you Vladimir!

9

Can this method be used for vertical lines, too? Could you please share the CSS with me? I also think this can be useful for others, so you may like to include it in F7 as well in the next version.

Is this a good idea?

.data-table th:not(:first-child), .data-table td:not(:first-child) {
  border-right: calc(1px / var(--f7-device-pixel-ratio)) solid var(--f7-table-cell-border-color);
}
10

Probably something like:

.data-table tbody td:after {
  content:'';
  position: absolute;
  background-color: var(--f7-table-cell-border-color);
  display: block;
  z-index: 15;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  transform-origin: 100% 0%;
  transform: scaleX(1 / var(--f7-device-pixel-ratio));
}
1 Like
11

It will work for sure only in iOS

12

Thanks, Vladimir! You’re always a great help! For this project I use Aurora.

1 Like
13

For those seeking the final solution, here it is, based on @nolimits4web’s great solution, for both the header and body cells; remove one if you do not need it:

.data-table thead th:not(:first-child):after,
.data-table tbody td:not(:first-child):after {
  content:'';
  position: absolute;
  background-color: var(--f7-table-cell-border-color);
  display: block;
  z-index: 15;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  transform-origin: 100% 0%;
  transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
}
1 Like