This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title></title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<style> | |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
font-family: "Lato","Helvetica Neue",Arial,sans-serif; | |
-webkit-font-smoothing: antialiased !important; | |
} | |
html { | |
font-size: 12px; | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
} | |
body { | |
font-family: "Lato","Helvetica Neue",Arial,sans-serif; | |
line-height: 1.42857; | |
color: gray; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
background-color: transparent; | |
width: 250px; | |
max-width: 250px; | |
margin-bottom: 20px; | |
} | |
th { | |
text-align: left; | |
} | |
.table>thead>tr>th,.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td { | |
padding: 10px; | |
line-height: 1.42857; | |
vertical-align: top; | |
border-top: 1px solid #ddd; | |
} | |
.table>caption+thead>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>th,.table>thead:first-child>tr:first-child>td { | |
border-top: 0; | |
} | |
.table>tbody+tbody { | |
border-top: 2px solid #ddd; | |
} | |
.table-condensed>thead>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>tfoot>tr>td { | |
padding: 5px; | |
} | |
.table-bordered>thead>tr>th,.table-bordered>thead>tr>td { | |
border-bottom-width: 2px; | |
} | |
.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th { | |
background-color: #f9f9f9; | |
} | |
.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th { | |
background-color: #f5f5f5; | |
} | |
table col[class*="col-"] { | |
position: static; | |
float: none; | |
display: table-column; | |
} | |
table td[class*="col-"],table th[class*="col-"] { | |
position: static; | |
float: none; | |
display: table-cell; | |
} | |
label { | |
display: inline-block; | |
max-width: 100%; | |
margin-bottom: 5px; | |
font-weight: bold; | |
} | |
.label-info { | |
background-color: #56bdf1; | |
} | |
.label-primary { | |
background-color: #1bb7a0; | |
} | |
.label-success { | |
background-color: #94b758; | |
} | |
.label-danger { | |
background-color: #fa7b58; | |
} | |
.label-warning { | |
background-color: #f3c536; | |
} | |
.label { | |
display: inline; | |
padding: .5em .8em; | |
font-size: 75%; | |
font-weight: bold; | |
line-height: 1; | |
color: #fff; | |
text-align: center; | |
white-space: nowrap; | |
vertical-align: baseline; | |
border-radius: .25em; | |
} | |
</style> | |
</head> | |
<body> | |
<table class="table"> | |
<thead> | |
<tr> | |
<th>#</th> | |
<th>Status</th> | |
<th>Player</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td><span class="label label-info">Goalkeeper</span></td> | |
<td>Julian Speroni</td> | |
</tr> | |
<tr> | |
<td>2</td> | |
<td><span class="label label-primary">Right back</span></td> | |
<td>Joel Ward</td> | |
</tr> | |
<tr> | |
<td>3</td> | |
<td><span class="label label-success">Defender</span></td> | |
<td>Scott Dann</td> | |
</tr> | |
<tr> | |
<td>4</td> | |
<td><span class="label label-warning">Midfielder</span></td> | |
<td>Mile Jedinak</td> | |
</tr> | |
<tr> | |
<td>5</td> | |
<td><span class="label label-danger">Winger</span></td> | |
<td>Yannick Bolaise</td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> |
No comments:
Post a Comment