CODEWITHSUNDEEP
htmlcsshtml-table
basZero
basZero

Reputation: 4284

HTML table with single 25% column uses 100% width, why?

I have a table that dynamically gets filled by data using 4 columns. Each column is defined to use 25% of space. Works fine if the table contains at least one row with 4 data cells. If the dynamic data just fills one cell (1 filled cell), the column uses 100% instead of 25% of the width.

How can this be resolved without adding empty cells? Is this possible somehow?

Sample: http://jsfiddle.net/ydm391mz/

<div id="top">
    <table>
        <tr><td>Just 25%</td></tr>
    </table>
</div>

and

#top 
{
    background-color:#eeeeee;
    width:100%;
}
#top table 
{
    width:100%;
}
#top td 
{
    width:25%;
    background-color:#aaaaaa;
}

Upvotes: 2

Views: 3089

Answers (4)

Alex
Alex

Reputation: 8695

You can use display:inline-block;. But this don't forget to remove extra space where there are 4 tds

#top td {
    width:25%;
    background-color:#aaaaaa;
    display: inline-block;
}

Jsfiddle

Upvotes: 2

Marcel Wasilewski
Marcel Wasilewski

Reputation: 2679

Your tr gets autofilled, you can do this for example:

<div id="top">
    <table>
        <tr>
            <td>Just 25%</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

You tell the HTML you got 4 td´s with text (even if only one has text), and every single column has 25% then.

EDIT:

There was a question anout what if he wants more than 4 <td>'s but only the first one beeing 25%

The first part is simple, you just add another <td>

<div id="top">
    <table>
        <tr><td>Just 25%</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

The second part is CSS now, there is for sure not only one solution for doing this, my css looks like this, so only the first <td> gets the 25% width:

#top td {
    background-color:#aaaaaa;
}

#top td:nth-child(1) {
    width:25%;
}

Upvotes: 3

Lidaranis
Lidaranis

Reputation: 785

you can try this

#top td {
    display:block;
    width:25% ;
    background-color:#aaaaaa;
}

I wouldn't use it because you could mess up the table when adding more columns, but it works.

Upvotes: 2

Tefek
Tefek

Reputation: 162

You have only one column, so it auto fills the entire width.

Add one more column and it will change to 25%.

Check it out here:

table {
  width: 100%;
}
table td {
  background-color: #aaaaaa;
}
#twentyfive {
  width: 25%;
}
<div>
  <table>
    <tr>
      <td id="twentyfive">Just 25%</td>
      <td>Everything else</td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions