Как сделать таблицу тд полной шириной в мобильном?

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>

Я хочу сделать тд полной шириной в мобильном телефоне.

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>