"부트스트랩 .table-bordered"의 두 판 사이의 차이

2017년 10월 31일 (화) 14:23 판

부트스트랩 .table-bordered 클래스
Bootstrap 테이블 .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'>
    <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: 5px solid #fff;
}
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: 5px solid #fff;
}

3 같이 보기

@@ 38번째 줄: / 38번째 줄: @@
 <source lang='css'>
 .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;
+     border: 5px solid #fff;
 }</source>