“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?

回答1:

Try this:

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

回答2:

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.

回答3:

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>

来源：https://stackoverflow.com/questions/4615348/faking-table-rows-with-divs-and-spans

标签

html

css

css-tables