我正在研究html表结构,并且在移动设备中遇到一个问题。以下是我的表代码。
<table style="width: 100%;">
<tbody>
<tr>
<th><span style="color: #000000;">Title </span></th>
<th><span style="color: #000000;">Link</span></th>
<th><span style="color: #000000;">Link</span></th>
</tr>
<tr>
<td><span style="color: #000000;">Intro</span></td>
<td>Link Here</td>
<td>Link</td>
</tr>
<tr>
<td><span style="color: #000000;">Intro</span></td>
<td>Link Here</td>
<td>Link</td>
</tr>
<tr>
<td><span style="color: #000000;">Intro</span></td>
<td>Link Here</td>
<td>Link</td>
</tr>
</tbody>
</table>
我想在移动设备中将td设为全角。
答案 0 :(得分:1)
以这种方式添加media Query
,并用HTML
添加data-th
@media screen and (max-width: 640px) {
table#customDataTable caption {
background-image: none;
}
table#customDataTable thead {
display: none;
}
table#customDataTable tbody td {
display: block;
padding: .6rem;
}
table#customDataTable tbody tr td:first-child {
background: #666;
color: #fff;
}
table#customDataTable tbody tr td:first-child a {
color: #fff;
}
table#customDataTable tbody tr td:first-child:before {
color: rgb(225, 181, 71);
}
table#customDataTable tbody td:before {
content: attr(data-th);
font-weight: bold;
display: inline-block;
width: 10rem;
}
table#customDataTable tr th:last-child,
table#customDataTable tr td:last-child {
max-width: 100% !important;
min-width: 100px !important;
width: 100% !important;
}
}
<table style="width: 100%;" id="customDataTable">
<thead>
<tr>
<th><span style="color: #000000;">Title </span></th>
<th><span style="color: #000000;">Link</span></th>
<th><span style="color: #000000;">Link</span></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Title"><span style="color: #000000;">Intro</span></td>
<td data-th="Link">Link Here</td>
<td data-th="Link">Link</td>
</tr>
<tr>
<td data-th="Title"><span style="color: #000000;">Intro</span></td>
<td data-th="Link">Link Here</td>
<td data-th="Link">Link</td>
</tr>
<tr>
<td data-th="Title"><span style="color: #000000;">Intro</span></td>
<td data-th="Link">Link Here</td>
<td data-th="Link">Link</td>
</tr>
</tbody>
</table>