@hesenger/react-simpletable/dist/index.css

Simple table component to render json data from local or remote

/* based on https://material.io/components/data-tables  */

._1ONUw {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 4px;
}

._1ONUw table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 10pt; line-height: 3em; }
._1ONUw table th, ._1ONUw table td { 
  padding: 0 16px; border-bottom: 1px solid rgba(0,0,0,.12); 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0;
}
._1ONUw table th { font-weight: bold; }

._1ONUw table tr:hover { background-color: rgba(0,0,0,.04); }
._1ONUw table tr._3ecil td { background-color: rgba(0,0,0,.02); }

._1ONUw table tfoot th { padding: 10px; }
._1ONUw table tfoot input, ._1ONUw table tfoot button { 
  line-height: 2.5em; padding: 0 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
  text-align: center; margin: 0 10px; width: 46px;
} 

._2VRa4 {
  --border: #ccc;
  --row-even: #efefef;
  --row-hover: #ccc;
  --table-active: #999;
}

._2VRa4 table {
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  width: 100%; border-collapse: collapse; 
  border-spacing: 0; font-size: 10pt; line-height: 2em; 
}
._2VRa4 table td { border-right: 1px solid var(--border); cursor: default; box-sizing: border-box; }
._2VRa4 table th { 
    font-weight: normal; text-align: center; background-color: var(--table-head); 
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); 
    border-right: 1px solid var(--border); cursor: pointer;
}
._2VRa4 table thead th:hover {background-color: var(--row-hover); }
._2VRa4 table thead td, ._2VRa4 table tbody td { padding-left: .5em; padding-right: .5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
._2VRa4 table tbody tr:nth-child(even) { background-color: var(--row-even); }
._2VRa4 table tbody tr._630oe td { background-color: var(--table-active); }
._2VRa4 table tbody tr:hover td, table tbody tr._630oe:hover td { background-color: var(--row-hover); }
._2VRa4 table tfoot th { padding: 0; }
._2VRa4 table tfoot input, ._2VRa4 table tfoot button { 
  width: 46px; padding: .6em .4em; border: none; text-align: center; margin: 0 2px;
}