Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2011, 15:15
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

div внутри ячейки таблицы
Физкульт-привет!
Ребят, штука не понятная. Причем очень не понятная.
Есть таблица. Внутри ячейки имеется div. Ему задана ширина в пикселях на пару пикселей меньше чем у ячейки. В диве длинный текст. И поэтому для него заданы:
{
overflow: hidden;
white-space: nowrap;
width: {{ td.width-2 }}
}

Так вот между дивом и ячейкой появляется пустое пространство.
|----------------------------------|
|-------------- ______________ |
| div _______ | __ пустота ___ |
|-------------- ______________ |
|___ячейка________________|

Очень долго искал откуда оно. Ну нет нигде. И в конце концов напоролся на то, что если обычный текст в тегах span или p со свойством атрибута white-space: nowrap вставить в таблицу, то образуется пустое пространство. Причем это не один-два пикселя, а сотни пикселей. margin'ы и padding'и заданы в ноль все.

Если в фаербаге увеличиваю ширину дива, то ширина пустого пространства тоже растет и расширяет ячейку.
Подскажите в чем проблема? Как лечить?

Последний раз редактировалось cmygeHm, 27.06.2011 в 15:21.
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2011, 16:12
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Пожалуйста, приведите пример кода.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 27.06.2011, 16:24
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 27.06.2011, 17:37
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Мое мнение, что таблице нельзя указывать свойство ширины 100%, раз уж все ширины фиксированы, то ширина таблицы тоже пусть будет фиксированной.
Ответить с цитированием
  #5 (permalink)  
Старый 27.06.2011, 17:41
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

хм. учтем. спасибо
Ответить с цитированием
  #6 (permalink)  
Старый 28.06.2011, 10:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Собрал всё в кучу...

<!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>


Где собственно криминал? Как его посмотреть?

Для меня очень странно когда размеры в шапке указывают отличные от размеров в самом теле таблицы...
Вообще с размерами у автора какая-то каша.
Ответить с цитированием
  #7 (permalink)  
Старый 28.06.2011, 10:44
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

тема закрыта. я просто целый день перебирал-перебирал. что-то где унаследовалось или еще что... ничего не нашел. написал заново с нуля. самое удивительное почти такая же таблица надо этой отображается нормально....
Ответить с цитированием
  #8 (permalink)  
Старый 28.06.2011, 10:46
Аватар для cmygeHm
Профессор
Отправить личное сообщение для cmygeHm Посмотреть профиль Найти все сообщения от cmygeHm
 
Регистрация: 12.10.2010
Сообщений: 196

я думаю тему можно даже удалить с форума ибо не несет никакой пользы в мир. А КСА спасибо, буду аккуратнее оформлять вопросы и код. жаль что нет на форуме возможности удаления темы. а если писать то кому? модераторам?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
onmouseout для ячейки таблицы. Sir_Hally Events/DOM/Window 2 24.01.2012 17:21
Как получить содержимое ячейки таблицы Enxiro jQuery 5 29.05.2011 16:36
Покрасить все ячейки таблицы с заданным id alexan0308 Ваши сайты и скрипты 11 17.04.2011 15:01
Ячейки Таблицы Slawaq Элементы интерфейса 20 22.05.2010 13:49
позиция рисунка внутри ячейки таблицы. arlek1n Общие вопросы Javascript 11 22.12.2008 10:21