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

2020년 11월 2일 (월) 02:52 기준 최신판

부트스트랩 .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: 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;
}

3 같이 보기[ | ]

@@ 1번째 줄: / 1번째 줄: @@
-;부트스트랩 .table-striped class
+;부트스트랩 .table-bordered 클래스
-;Bootstrap 테이블 .table-striped
+;Bootstrap 테이블 .table-bordered
 ==예시==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <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-striped'>
+<table class='table table-bordered'>
      <tr><th>#</th><th>이름</th></tr>
      <tr><td>1</td><td>한놈</td></tr>
@@ 15번째 줄: / 15번째 줄: @@
      <tr><td>4</td><td>너구리</td></tr>
 </table>
-</source>
+</syntaxhighlight>
 <jsfiddle height='250'>o128tvj5</jsfiddle>
 ==CSS==
 ;.table
-<source lang='css'>
+<syntaxhighlight lang='css'>
 .table {
      border-spacing: 0;
@@ 34번째 줄: / 34번째 줄: @@
      text-align: left;
 }
-</source>
+</syntaxhighlight>
 ;.table-bordered
-<source lang='css'>
+<syntaxhighlight 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;
-}</source>
+}</syntaxhighlight>
 ==같이 보기==
 *[[부트스트랩 .table]]
-*[[부트스트랩 .table-bordered]]
+*[[부트스트랩 .table-striped]]
+*[[부트스트랩 .table-striped .table-bordered]]
 *[[부트스트랩]]
 *[[HTML table]]
+*[[HTML 테이블 모든 테두리 1px 주기]]
 [[분류: Bootstrap]]
+[[분류: HTML table]]