CODEWITHSUNDEEP
htmlcsscss-tables
AP257
AP257

Reputation: 93793

"Faking" table rows with divs and spans?

I'd like to create some "table rows" using <div> and <span>. (Why not use actual table rows? Because I want to set rounded corners on each table row using the awesome jquery corner plugin, and it doesn't seem to like table rows.)

I'd like three-cell rows, with LH and RH cells of fixed width, and a central cell of fluid width, in which the text should wrap. 

[fixedwidth][wrapwrapwrapwrap          ][fixedwidth]

[fixedwidth][wrapwrapwrapwrapwrapwrapwr][fixedwidth]
             apwrapwrapwrapwrapwrapwr

[fixedwidth][wrapwrapwrapwrap          ][fixedwidth]

This is what I have so far, but it's disastrously wrong: 

<html> 
<head>
<style>
.table-row {
    width:100%;
}
.cell1 {
    float: left;
    width: 200px;
}
.cell2 {
    float: left;
}
.cell3 {
    float: right;
    width: 200px;
}
</style>
</head>
<body> 
<div class='table-row'>
<span class="cell1">Title</span>
<span class="cell2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
<span class="cell3">Available</span>
</div>
</body>
</html>

The central text doesn't wrap, and pushes down onto the next line.

Please could anyone advise?

Upvotes: 2

Views: 5165

Answers (3)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146450

Can't you just add divs and spans inside regular table cells?

Edit:

<tr>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
</tr>

Upvotes: 1

Alin P.
Alin P.

Reputation: 44346

First of all, it doesn't make sense to float inline elements. Secondly, that's not how you create a liquid column.

Try these changes:

<div class="cell1">Title</div>
<div class="cell3">Available</div>
<div class="cell2">consequat.</div>

and 

.cell2 {
    margin-left: 200px;
    margin-right: 200px;
}

Note: If you add padding/borders/margins to the cells don't forget to add the sum of the sizes to margin-left and margin-right for cell2.

Upvotes: 1

Kalessin
Kalessin

Reputation: 2302

Try this:

<style>
.table-row {
    display: table-row;
}
.cell1, .cell2, .cell3 {
    display: table-cell;
}
.cell1, .cell3 {
    width: 200px;
}
</style>

Upvotes: 2

Related Questions