How to make td table occupy full width using css?

Question

I am making a mobile paging site. How to make td table use full width (100%) using css?

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

It is too difficult to read information in two columns located close to each other.

Answer 1

This will display the cells one below the other:

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

or, as @nux noted,

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

either should be enough, although the Microsoft browser does not oblige, and they may require proprietary markup; then again, if people plan to use a browser on their phone, they will not buy a Microsoft phone, so the problem is not significant.

Answer 2

First, you need to make sure your table is 100% wide, then you can do the same with th and td

 table, td { width: 100%; } 

EDIT: since you edited your original post, you should give the first td class

 <td class="first"> td.first { width: 100%; } 

This will cause the first column to use as much of the page as possible, and the second column will be wide enough for the content. You may need to give it a width as well if you do not want your text to be wrapped or something else.