CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 12171

How to make table td taking up the whole width using css?

I am making a site with tables mobile responsive. How do I make table td take up the whole full width(100%) using css? 

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

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

Upvotes: 26

Views: 120032

Answers (4)

Steve
Steve

Reputation: 69

When in mobile screen, change the tr to display:flex and td set to width 100%. Like below:

@media screen and (max-width: 576px){
    tr {
      display: flex;
      flex-wrap: wrap;
    }
    
    td {
      width: 100%;
    }
}

If your table td has a border, you might want to remove the first columns of td border in mobile so that first column td content will looks like it is in the same columns with 2nd td in mobile:

tr td:first-child {
  border: none;
}

Upvotes: 4

rhysclay
rhysclay

Reputation: 1683

The answers above are correct but you need to also make sure you'r td element has a reference for its 100% width otherwise it may not work. You should have this rule set at the start of your stylesheet:

body, html {
    width: 100%;
}

Take a look at this thread for more info: HTML table td not full width when using display block and 100% width attributes

Upvotes: 1

Riccardo Zorn
Riccardo Zorn

Reputation: 5615

This will show the cells one below the other:

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

or, as noted by @nux, 

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

either should be enough, although microsoft browser won't oblige and you might need proprietary markup for those; then again if people plan to use a browser on their phone they wouldn't buy a microsoft phone, so the problem is minor.

Upvotes: 34

Revent
Revent

Reputation: 2109

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

table, td {
   width: 100%;
}

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

<td class="first">

td.first {
   width: 100%;
}

This will cause the first column to use as much of the page as it can and the second td will be just wide enough for the content. You may have to give it a width too if you don't want your text to wrap or something.

Upvotes: 2

Related Questions