- 부트스트랩 .table-bordered .table-striped
- Bootstrap 테이블 .table-striped .table-bordered
1 예시[ | ]
html
Copy
<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
css
Copy
.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
css
Copy
.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
css
Copy
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
3 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.
- 분류 댓글:
- HTML table (2)
자바스크립트 HTML 테이블 행 추가/삭제 ― Pilming자바스크립트 HTML 테이블 행 추가/삭제 ― Jmnote