CODEWITHSUNDEEP
htmlcsshtml-tabletablecell
LostInCyberSpace
LostInCyberSpace

Reputation: 433

table in chrome keeps collapsing when cells have no content?

css

html,body{height:100%}
.mwh{width:100%;height:100%}
.w75c{width:75%}
.bor,.bor td,.bor th{border:1px teal dashed}

htm

<table class="mwh bor">
    <tr>
        <td></td>
        <td>body</td>
        <td></td>
    </tr>
</table>

The Problem

When the table has the bor class the 1st and 3rd cells display thier respective 12.5% width, yet when the bor class is removed both side cells collapse unless their is content within them like <td>&nbsp;</td>.

is there a way to have it so as these side cells do not collapse?

Upvotes: 1

Views: 1349

Answers (2)

K K
K K

Reputation: 18099

Add

table-layout: fixed;

to the table css. You will not need the fixed width then.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/812/

CSS:

html, body {
    height:100%
}
.mwh {
    width:100%;
    height:100%;
    table-layout:fixed
}

Upvotes: 3

sanjeev shetty
sanjeev shetty

Reputation: 458

add 

td {width:30%}


html,body{height:100%}
.mwh{width:100%;height:100%}
.w75c{width:75%}
.bor,.bor td,.bor th{border:1px teal dashed}
td {width:30%}
<table class="mwh bor">
    <tr>
        <td></td>
        <td>body</td>
        <td></td>
    </tr>
</table>

Upvotes: 0

Related Questions