codingtcher.com
Theme Night
Home
Login

Css Tables

Home » Css » Css Tables

css tables

/*
<!-- Html Structure -->
<div class="table">
  <div class="table-caption">employees table</div>
  <div class="table-header">
    <div class="row">
      <div class="cell">id</div>
      <div class="cell">name</div>
      <div class="cell">salary</div>
      <div class="cell">department</div>
    </div>
  </div>
  <div class="table-body">
    <div class="row">
      <div class="cell">#1</div>
      <div class="cell">ahmed mohammed</div>
      <div class="cell">3000EGP</div>
      <div class="cell">graphic design</div>
    </div>
    <div class="row">
      <div class="cell">#2</div>
      <div class="cell">yousif hamdy</div>
      <div class="cell">5000EGP</div>
      <div class="cell">web design</div>
    </div>
    <div class="row">
      <div class="cell">#3</div>
      <div class="cell">faris malak</div>
      <div class="cell">10000EGP</div>
      <div class="cell">software developer</div>
    </div>
  </div>
  <div class="footer">
    <div class="row">
      <div class="cell">total</div>
      <div class="cell"></div>
      <div class="cell">18000EGP</div>
      <div class="cell"></div>
    </div>
  </div>
</div>
*/

/* CSS styling */

* {
  box-sizing: border-box;
  font-family: sans-serif;
  text-transform: capitalize;
}

.table {
  display: table;
  border-bottom: 3px solid #49987b;
  background-image: linear-gradient(to bottom,#49987b 20%,#eee 20%,#eee 100%);
  border-radius: 10px 10px 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 2px 10px 5px #AAA;
}

.table-caption {
  display: table-caption;
  padding: 10px;
  margin: 10px auto;
  font-size: 20px;
  font-weight: bold;
  background-color: #49987b;
  width: fit-content;
  color: #FFF;
  border-radius: 10px;
  box-shadow: 0 1px 5px 2px #AAA;
}

.table-header {
  display: table-header-group;
  color: white;
  border-radius: 50%;
  font-weight: bold;
}

.table-body {
  display: table-row-group;
}

.footer {
  display: table-footer-group;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
  text-align: center;
}

Css Related Post