0

我有一行单元格（或 div）：

cell1
cell2
cell3
cell4

我希望 cell1、cell2 和 cell4 始终显示它们的所有数据（但也要缩小以适应），如果线路上没有足够的空间，我希望 cell2 剪辑其数据以防止换行。

我也希望 cell4 与行的右侧对齐。

cell1   cell2          cell3                             cell4

data    clipped data   data                              data

想法？

4

1 回答 1

0 
<!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>
于 2010-02-18T08:35:45.587 回答