Bootstrap - Responsive Table

Bootstrap---Responsive-Table-.markdown

Bootstrap - Responsive Table

A Pen by YongHun Byun on CodePen.

License.

index.html

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<h1>Responsive Table</h1>

<div class="table-responsive flexcroll"> 
  <table class="table table-bordered flexcroll">
    <thead>
      <tr>
        <th>#</th>
        <th>성</th>
        <th>이름</th>
        <th>이메일</th>
        <th>주소</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>강</td>
        <td>환기</td>
        <td>kang@mail.com</td>
        <td>서울 강동구 성내동 111-111</td>
      </tr>
      <tr>
        <td>2</td>
        <td>변</td>
        <td>용훈</td>
        <td>river@mail.com</td>
        <td>서울 강동구 성내동 111-222</td>
      </tr>
      <tr>
        <td>3</td>
        <td>이</td>
        <td>철호</td>
        <td>lee@mail.com</td>
        <td>서울 강동구 성내동 111-333</td>
      </tr>
    </tbody>
  </table>
</div>

<p class="text-center cr">by <strong>RedRibbon</strong></p>

style.css

body {padding:20px;}
h1{background:#F1645E; color:#fff!important; padding:10px 0; text-align:center; margin-bottom:20px!important;}
p.cr{font-size:0.75me; color:#666; background:#eee; padding:5px; margin-top:20px;}
p.cr > strong{color:#F1645E;}

.outer {
  border:4px solid #434343;
  padding: 20px;
  -webkit-border-radius: 20px;
}
table {height: 50px; font-weight: bold; font-size: 2em; color: #fff;}
thead{background: #5F8EFC;}
tbody{background: #FEBA00;}
th{text-align:center!important;}
.t3{background: #F1645E;}

.flexcroll{
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #FFFFFF;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

/* Let's get this party started */
.flexcroll::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
.flexcroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(60,60,60,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}