div внутри ячейки таблицы
Физкульт-привет!
Ребят, штука не понятная. Причем очень не понятная. Есть таблица. Внутри ячейки имеется div. Ему задана ширина в пикселях на пару пикселей меньше чем у ячейки. В диве длинный текст. И поэтому для него заданы: { overflow: hidden; white-space: nowrap; width: {{ td.width-2 }} } Так вот между дивом и ячейкой появляется пустое пространство. |----------------------------------| |-------------- ______________ | | div _______ | __ пустота ___ | |-------------- ______________ | |___ячейка________________| Очень долго искал откуда оно. Ну нет нигде. И в конце концов напоролся на то, что если обычный текст в тегах span или p со свойством атрибута white-space: nowrap вставить в таблицу, то образуется пустое пространство. Причем это не один-два пикселя, а сотни пикселей. margin'ы и padding'и заданы в ноль все. Если в фаербаге увеличиваю ширину дива, то ширина пустого пространства тоже растет и расширяет ячейку. Подскажите в чем проблема? Как лечить? |
Пожалуйста, приведите пример кода.
|
html:
<table cellpadding="0px" cellspacing="0px" class="DbGrid"> <thead> <tr> <th width="30px">asdf</th> <th width="100px">asdf</th> <th width="50px">asdf</th> <th width="50px">asdfasd</th> <th width="50px">asdfasdf</th> </tr> </thead> <tbody> <tr> <td><div style="width:30px;">146002</div></td> <td><div style="width:100px;">1008 asdf asdfasdf asdfasd fasdf asdfasdf</div></td> <td><div style="width:50px;">Севастопольская, 29</div></td> <td><div style="width:50px;" class="textAlignRight">610</div></td> <td><div style="width:50px;" class="textAlignRight">13</div></td> </tr> </tbody> </table> css:
.DbGrid {
margin-top: 25px;
font-size: 12px;
/*border-collapse:collapse;*/
width: 100%;
border-top: 1px solid #99BBE8;
border-left: 1px solid #99BBE8;
border-right: 1px solid #99BBE8;
border-bottom: 1px solid #99BBE8;
}
.DbGrid thead tr {
height: 25px;
background: url("cupertino/images/ui-bg_highlight-soft_100_deedf7_1x100.png") repeat-x scroll 50% 50%;
}
.DbGrid thead th {
text-align: center;
padding-left: 4px;
padding-right: 4px;
border-bottom:1px dotted #999;
border-right: 1px solid #999;
}
.DbGrid thead th:last-child {
border-right: 0px none;
}
.DbGrid tbody td {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
border-bottom:1px solid #D0D2C1;
border-right: 1px solid #C0C0C0;
}
.DbGrid tbody td:last-child {
border-right: 0px none;
/*text-align: center;*/
}
.DbGrid tbody tr:last-child td{
border-bottom: 0px none;
}
.DbGrid tbody td div{
width: 100px;
overflow: hidden;
white-space: nowrap;
margin: 0px;
padding: 0px;
}
.DbGrid tbody td{
margin: 0px;
padding: 0px;
}
.textAlignRight {
text-align: right;
}
.textAlignCenter {
text-align: center;
}
|
Мое мнение, что таблице нельзя указывать свойство ширины 100%, раз уж все ширины фиксированы, то ширина таблицы тоже пусть будет фиксированной.
|
хм. учтем. спасибо
|
Собрал всё в кучу...
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.DbGrid {
margin-top: 25px;
font-size: 12px;
/*border-collapse:collapse;*/
width: 100%;
border: 1px solid #99BBE8;
}
.DbGrid thead tr {
height: 25px;
background: url("cupertino/images/ui-bg_highlight-soft_100_deedf7_1x100.png") repeat-x scroll 50% 50%;
}
.DbGrid thead th {
text-align: center;
padding-left: 4px;
padding-right: 4px;
border-bottom:1px dotted #999;
border-right: 1px solid #999;
}
.DbGrid thead th:last-child {
border-right: 0px none;
}
.DbGrid tbody td {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
border-bottom:1px solid #D0D2C1;
border-right: 1px solid #C0C0C0;
}
.DbGrid tbody td:last-child {
border-right: 0px none;
/*text-align: center;*/
}
.DbGrid tbody tr:last-child td{
border-bottom: 0px none;
}
.DbGrid tbody td div {
width: 100px;
overflow: hidden;
white-space: nowrap;
margin: 0px;
padding: 0px;
}
.DbGrid tbody td{
margin: 0px;
padding: 0px;
}
.textAlignRight {
text-align: right;
}
.textAlignCenter {
text-align: center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table cellpadding="0px" cellspacing="0px" class="DbGrid">
<thead>
<tr>
<th width="30px">asdf</th>
<th width="100px">asdf</th>
<th width="50px">asdf</th>
<th width="50px">asdfasd</th>
<th width="50px">asdfasdf</th>
</tr>
</thead>
<tbody>
<tr>
<td><div style="width:30px;">146002</div></td>
<td><div style="width:100px;">1008 asdf asdfasdf asdfasd fasdf asdfasdf</div></td>
<td><div style="width:50px;">Севастопольская, 29</div></td>
<td><div style="width:50px;" class="textAlignRight">610</div></td>
<td><div style="width:50px;" class="textAlignRight">13</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Где собственно криминал? Как его посмотреть? Для меня очень странно когда размеры в шапке указывают отличные от размеров в самом теле таблицы... :) Вообще с размерами у автора какая-то каша. |
тема закрыта. я просто целый день перебирал-перебирал. что-то где унаследовалось или еще что... ничего не нашел. написал заново с нуля. самое удивительное почти такая же таблица надо этой отображается нормально....
|
я думаю тему можно даже удалить с форума ибо не несет никакой пользы в мир. А КСА спасибо, буду аккуратнее оформлять вопросы и код. жаль что нет на форуме возможности удаления темы. а если писать то кому? модераторам?
|
| Часовой пояс GMT +3, время: 10:41. |