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 に答える