Tables

/* Modifier */
.c-tbl--purple th {
	background-color: hsl(330, 50%, 40%)
}
.c-tbl--purple td {
  border-color: hsl(330, 40%, 80%);
}
.c-tbl--purple tr th:last-of-type {
  border-inline-color: hsl(330, 50%, 40%);
}
.c-tbl--purple tr th:first-of-type {
  border-inline-start-color: hsl(330, 50%, 40%);
}
@media (hover: hover) {
  .c-tbl--purple tr:hover td {
		background-color: hsl(330, 60%, 95%);
  }
}

/**
 * c-tbl.css
 * @version 1.0.0
 * @description Generic Table Component
*/
:where(.c-tbl) {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 99.9%;
}

:where(.c-tbl thead th) {
  background-color: hsl(200, 60%, 40%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 0;
  border-inline-start-width: 0;
  color: hsl(200, 60%, 99%);
  padding-block: 1.25ch;
  padding-inline: 2ch;
  text-transform: uppercase;
}

:where(.c-tbl td) {
  background-color: #FFF;
  border-color: hsl(200, 60%, 80%);
  border-style: solid;
  border-block-start-width: 0;
  border-inline-end-width: 1px;
  border-block-end-width: 1px;
  border-inline-start-width: 0;
  padding-block: 1.25ch;
  padding-inline:	2ch;
}

/* Because of `border-collapse: separate`, we need to  */
:where(.c-tbl tr td:first-of-type) {
  border-inline-start-width: 1px;
}
/* For header-cells, we set the `border-color` of the first and last border to it's `background-color` */
:where(.c-tbl tr th:last-of-type) {
  border-inline-color: hsl(200, 60%, 40%);
}
:where(.c-tbl tr th:first-of-type) {
  border-inline-start-color: hsl(200, 60%, 40%);
}
/* Set `border-radius` on first and last rows, on first and last cell */
:where(.c-tbl thead th:first-of-type) {
  border-start-start-radius: 0.5rem;
}
:where(.c-tbl thead th:last-of-type) {
  border-start-end-radius: 0.5rem;
}
:where(.c-tbl tbody tr:last-of-type td:first-of-type) {
  border-end-start-radius: 0.5rem;
}
:where(.c-tbl tr:last-of-type td:last-of-type) {
  border-end-end-radius: 0.5rem;
}

/*
=====
HOVER
=====
*/
@media (hover: hover) {
  :where(.c-tbl) tr:hover td {
		background-color: hsl(200, 60%, 95%);
  }
}

/* For demo */
body {
  font-family: ui-sans-serif, sans-serif;
  margin-block: 2ch;
  margin-inline: auto;
  max-inline-size: 64rem;
  padding-inline: 2ch;
}

button {
  padding: 1ch 2ch;
}

Basic Table with rounded corners

By: pixeldev

body { padding:60px; font-family: sans-serif; max-width:900px; margin:0 auto; }

.table-list { 
  border:thin solid; 
  width:100%; 
  max-width: 100%; 
  line-height: 26px; 
}

.table-list th {
  text-align: left; 
  font-size: 80%; 
  line-height: 40px; 
}

.table-list td {
  background: #d2d2d2; 
  vertical-align: top; 
}

.table-list .item,
.table-list .date, 
.table-list .sum {
  width: 1%;
  white-space: nowrap; 
}

@media screen and (max-width: 800px) { 
  
  .table-list, 
  .table-list tbody {
    display: block; 
  }
  .table-list thead { 
    display: none; 
  }
  .table-list tr {
    display:flex; 
     align-content: stretch; 
    gap: 6px; 
    margin-bottom: 6px; 
    position: relative; 
    padding-bottom: 36px;
    background: #aaa; 
  }

.table-list td {
    display: block; 
  }
  .table-list .status,
  .table-list .date, 
  .table-list .sum {
    width: auto; 
  }
  
  .table-list .name { 
    flex-grow: 3;
  }
  .table-list .sum {
    flex-grow: 1;
    text-align:right; 
  }
  
  .table-list .status,
  .table-list .date { 
    position: absolute; 
    bottom: 7px;
    font-size:12px; 
  } 
  .table-list .status {
    right:0; 
  }
  
  .table-list .ellipsis {
    display: block; 
    margin: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; 
  }

}

Tables

Basic Table with rounded corners

By: pixeldev

A responsive flex table

By: jusar