.tablosirali table {
 border: 1px solid #ccc;
 border-collapse: collapse;
 margin: 0;
 padding: 0;
 width: 100%;
 table-layout: fixed;
}

.tablosirali table caption {
 font-size: 1.5em;
 margin: .5em 0 .75em;
}

.tablosirali table tr {
 background-color: #f8f8f8;
 border: 1px solid #ddd;
 padding: .35em;
}

.tablosirali table th,
.tablosirali table td {
 padding: .625em;
 text-align: center;
}

.tablosirali table th {
 font-size: .85em;
 letter-spacing: .1em;
}

@media screen and (max-width: 600px) {
 .tablosirali  table {
  border: 0;
 }

 .tablosirali  table caption {
  font-size: 1.3em;
 }

 .tablosirali  table thead {
  border: none;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
 }

 .tablosirali  table tr {
  border-bottom: 3px solid #ddd;
  display: block;
  margin-bottom: .625em;
 }

 .tablosirali  table td {
  border-bottom: 1px solid #ddd;
  display: block;
  font-size: .8em;
  text-align: right;
 }

 .tablosirali  table td::before {
  /*
  * aria-label has no advantage, it won't be read inside a table
  content: attr(aria-label);
  */
  content: attr(data-label);
  float: left;
  font-weight: bold;
 }

 .tablosirali table td:last-child {
  border-bottom: 0;
 }
}