CODEWITHSUNDEEP
css
Paolo Rossi
Paolo Rossi

Reputation: 2510

CSS display table width 100% cells behavior

I am trying to use the div with display table. I'd like that the first cell take 100% of length less than the space occupied by the second cell. the second cell must occupy only the space of the text. I tried in this way but without success.

HTML

<div class="tbl">
   <div class="t1">text 1</div>
   <div class="t2">text 2 3 4 5</div>
</div>

<div class="tbl">
   <div class="t11">text 1</div>
   <div class="t2">text 2 3 4 5</div>
</div>

CSS

.tbl {
display: table;
border: 1px solid #ccc;
width: 100%;
}

.t1, 
.t2 {
display: table-cell;
}

.t1 {
background: red;
width: 100%;
}

.t2 {
background: yellow;
}

.t11 {
background: red;
}

How could I do that? thanks

JSFIDDLE

Upvotes: 0

Views: 402

Answers (1)

mechalynx
mechalynx

Reputation: 1302

You can add white-space: nowrap to the second cell. This works for the top cell pair. For the second pair, you can just add display: table-cell; width: 100% as you had with the top pair and it'll work.

the fiddle

Upvotes: 1

Related Questions