сделать одну клетку или div уменьшить, чтобы освободить место для других - PullRequest
Новая
       26

сделать одну клетку или div уменьшить, чтобы освободить место для других

0 голосов
/ 18 февраля 2010

У меня есть линия ячеек (или делений): 

cell1
cell2
cell3
cell4

Я хочу, чтобы cell1, cell2 и cell4, всегда отображали все свои данные (но также сжимались, чтобы соответствовать), и если в строке недостаточно места, я хочу, чтобы cell2 обрезал свои данные, чтобы предотвратить перенос линия.

Я также хотел бы, чтобы ячейка 4 выравнивалась справа от ряда. 

cell1   cell2          cell3                             cell4

data    clipped data   data                              data

идеи?

1 Ответ

0 голосов
/ 18 февраля 2010 
<!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>
...