Jak zrobić tabelę td zajmującą całą szerokość za pomocą css?

Question

Uczyniam stronę z tabelami mobilnymi w trybie responsywnym. Jak sprawić, by tabela td zajmowała całą pełną szerokość (100%) za pomocą css?

<table> 
    <tr> 
     <td>Column One</td> 
     <td>Column Two</td> 
    </tr> 
</table> 

To jest zbyt trudne do odczytania informacji w dwóch kolumnach blisko siebie.

Answer 1

Po pierwsze, trzeba upewnić się, że stół ma 100% szerokości, można zrobić to samo z XX i td

table, td { 
    width: 100%; 
} 

EDIT: ponieważ edytowane swój oryginalny post, należy podać pierwszy td klasa

<td class="first"> 

td.first { 
    width: 100%; 
} 

to spowoduje, że pierwsza kolumna używać jak najwięcej jak to możliwe strony, a drugi td będzie wystarczająco szeroki dla treści. Być może będziesz musiał nadać jej szerokość, jeśli nie chcesz, aby tekst się zawijał lub coś w tym stylu.

Answer 2

To pokaże komórkom jedna pod drugą:

td {display:block;width:99.9%;clear:both} 

lub, jak zauważył @nux,

td {display:block; box-sizing:border-box; clear:both} 

albo powinny być wystarczająco, choć Microsoft przeglądarka nie zmusi cię i może wymagać opatentowanych znaczników; to znowu, jeśli ludzie planują używać przeglądarki na swoim telefonie, nie kupiliby telefonu microsoft, więc problem jest niewielki.