부트스트랩 .table-bordered .table-striped

부트스트랩 .table-bordered .table-striped
Bootstrap 테이블 .table-striped .table-bordered

1 예시[ | ]

<link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>

<table class='table table-bordered table-striped'>
    <tr><th>#</th><th>이름</th></tr>
    <tr><td>1</td><td>한놈</td></tr>
    <tr><td>2</td><td>두시기</td></tr>
    <tr><td>3</td><td>석삼</td></tr>
    <tr><td>4</td><td>너구리</td></tr>
</table>

2 CSS[ | ]

.table

.table {
    border-spacing: 0;
    border-collapse: collapse;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}
th {
    text-align: left;
}

.table-bordered

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 1px solid #ddd;
}

.table-striped

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

3 같이 보기[ | ]