如何在手机中使表td全宽？

Question

我正在研究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设为全角。

Answer 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>