make one cell or div shrink to give room for others
I have a line of cells (or divs):
cell1
cell2
cell3
cell4
I want cell1 cell2 and cell4 to always show all their data (but also to shrink to fit), and if there is not enough room on the line, i want cell2 to clip its data in order to prevent a wrapping of the line.
I also would like cell4 to align to the right of the row.
cell1 cell2 cell3 cell4
data clipped data data data
id开发者_JAVA技巧eas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#example {
width: 800px;
border: 2px solid yellow;
}
.cell1 { border:1px solid red;
vertical-align:top;
text-align:left;
word-wrap:break-word;
width:100px;
}
.cell2 { border:1px solid green;
vertical-align:top;
text-align:left;
width:100px;
display:block;
overflow:hidden;
}
.cell3 { border:1px solid blue;
vertical-align:top;
text-align:left;
word-wrap:break-word;
width:300px;
}
.cell4 { border:1px solid silver;
vertical-align:top;
text-align:right;
word-wrap:break-word;
width:300px;
}
.odd {}
.even {}
</style>
<body>
<table id="example">
<colgroup>
<col></col><col></col><col></col><col></col>
</colgroup>
<thead>
<tr><th>cell1</th><th>cell2</th><th>cell3</th><th>cell4</th></tr>
</thead>
<tr class="odd">
<td class="cell1">
1234 2345 3456 4567
</td>
<td class="cell2">
clip123clip123clip123clip123clip123clip123
</td>
<td class="cell3">
asdf asdf asdf sdfg
</td>
<td class="cell4">
sdfg sdfg sdfg sdfg sdfg sdfg sdfg
</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论