用户:SnowJin2004/沙盒
表格
行0列1 | 行0列2 |
---|---|
行1列1 | 行1列2 |
行2列1 | 行2列2 |
wiki
{| class="wikitable sortable mw-collapsible" 定义table(sortable可排序;mw-collapsible可折叠)
|+表格标题 |+ 定义caption
!行0列1 ! 定义th
!行0列2
|- |- 定义tr
|行1列1 | 定义td
|行1列2
|-
|行2列1
|行2列2
|}
css
.wikitable {
background-color: #f8f9fa;
color: #202122;
margin: 1em 0;
border: 1px solid #a2a9b1;
border-collapse: collapse;
}
.wikitable > caption {
font-weight: bold;
}
.wikitable > * > tr > th {
background-color: #eaecf0;
text-align: center;
}
.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
border: 1px solid #a2a9b1;
padding: 0.2em 0.4em;
}
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.jquery-tablesorter th.headerSort {
background-image: url(/w/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440);
cursor: pointer;
background-repeat: no-repeat;
background-position: center right;
padding-right: 21px;
}
html
<table class="wikitable sortable mw-collapsible jquery-tablesorter mw-made-collapsible">
<caption>表格标题
<span class="mw-collapsible-toggle mw-collapsible-toggle-default" role="button" tabindex="0" aria-expanded="true"><a class="mw-collapsible-text">折叠</a></span></caption>
<thead>
<tr>
<th class="headerSort" tabindex="0" role="columnheader button" title="升序排列">行0列1</th>
<th class="headerSort" tabindex="0" role="columnheader button" title="升序排列">行0列2</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
java
jquery和javascript我真的看不懂啊 Jeniffer我错了 能让我重学一次吗555