JSFiddle - React, Tailwind, and code Playground

by Muzaffar Rasulov

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row" id="tbl">
<label><h3>Таблица №1</h3></label>
<div class="col-md-12 tabl">
<table class="mytable" cellspacing="0">
  <tbody>
    <tr>
      <th>№</th>
      <th>НОМЕР</th>
      <th>ИНДЕКС</th>
      <th>СОСТ</th>
      <th>ДАТА</th>
      <th>ВРЕМЯ</th>
    </tr>
    <tr>
      <td>1</td>
      <td>3620</td>
      <td>7200  41 7236</td>
      <td>ФОРМ</td>
      <td>17.07</td>
      <td>03-28</td>
    </tr>
    <tr>
      <td>1</td>
      <td>3620</td>
      <td>7200  41 7236</td>
      <td>ФОРМ</td>
      <td>17.07</td>
      <td>03-28</td>
    </tr>
    <tr>
      <td>1</td>
      <td>3620</td>
      <td>7200  41 7236</td>
      <td>ФОРМ</td>
      <td>17.07</td>
      <td>03-28</td>
    </tr>
   </tbody>
  </table>
  </div></div>

CSS

#tbl{
  overflow-y: auto;
  height: 150px;
  /* display: block; */
}
.tabl{
    padding: 0px;
    height: 95%;
}
.mytable {    
    width: 100%;
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:16px;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    /*margin: -20px;*/
    border:#ccc 1px solid;
    border-collapse:separate;

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;

    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}

.mytable th {
    font-weight:bold;
    text-align: center;
    padding:11px 15px 12px 15px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;

    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.mytable th:first-child{
    text-align: left;
    padding-left:20px;
}
.mytable tr:first-child th:first-child{
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
}
.mytable tr:first-child th:last-child{
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
}
.mytable tr{
    text-align: center;
    padding-left:20px;
}
.mytable tr td:first-child{
    text-align: left;
    padding-left:20px;
    border-left: 0;
}
.mytable tr td {
    padding:5px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;

    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.mytable tr:nth-child(even) td{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top,  #f8f8f8, ...