Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Правильное формирование таблицы
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Правильное формирование таблицы

Страниц (1): [1]
 

1. Aricus - 05 Марта, 2015 - 11:35:27 - перейти к сообщению
Есть таблица:
CODE (html):
скопировать код в буфер обмена
  1. <table class="wide" cellspacing="15" cellpadding="10" border="0">
  2. <tr class="borderRed"><td class="tdUser">...</td>
  3.         <td colspan="2">...</td> </tr>
  4. <tr> <td colspan="3">...</td> </tr>
  5. <tr class="borderGreen"> <td colspan="2">...</td>
  6.         <td class="tdVar">...</td></tr></table>

, где установлена относительная ширина колонок:
CODE (html):
скопировать код в буфер обмена
  1. td.tdUser {width:20%; font-size:larger; line-height: 1.1}
  2. td.tdVar {vertical-align:middle; text-align:center; width:15%}

Так вот, почему правильно ширина распределяется только если в таблицу вставить пустую строку с прозрачными однопиксельными изображениями,
CODE (html):
скопировать код в буфер обмена
  1. <tr> <td><img src="image/Transparent.gif" alt="" /></td>
  2.         <td><img src="image/Transparent.gif" alt="" /></td>
  3.         <td><img src="image/Transparent.gif" alt="" /></td></tr>

и можно ли добиться правильного формирования как-нибудь ещё?
Без этой строки крайние колонки занимают почти всё доступное место.
2. RickMan - 05 Марта, 2015 - 11:44:39 - перейти к сообщению
&nbsp; - попробуй это вместо однопиксельной картинки.
3. GoDr - 06 Марта, 2015 - 05:36:46 - перейти к сообщению
Aricus пишет:
Без этой строки крайние колонки занимают почти всё доступное место.
Если не секрет, какой браузер и его версия? Я не смог повторить проблему, по крайней мере на http://jsfiddle[dot]net/ Была такая проблема в древних браузерах..
Ну или картинку приложи что и как.

RickMan пишет:
&nbsp; - попробуй это вместо однопиксельной картинки.
Лучше картинку. Мы же не знаем заполнение таблицы. А вдруг содержимое будет больше 1-го пикселя но меньше размера пробела
4. DelphinPRO - 06 Марта, 2015 - 11:51:16 - перейти к сообщению
Aricus пишет:
Так вот, почему правильно ширина распределяется только если в таблицу вставить пустую строку с прозрачными однопиксельными изображениями,

Задайте таблице стиль

CODE (css):
скопировать код в буфер обмена
  1. table { table-layout: fixed; }


И все размеры будут строго выдерживаться. При этом возможно содержимое будет не помещаться и выходить за пределы ячеек, если оно больше ширины ячеек.

Если вам нужно не так жестко выдерживать размеры, то задайте размер самой таблице. Например

CODE (css):
скопировать код в буфер обмена
  1. table { width: 100%; }
  2. /* или */
  3. table { width: 500px; }

(Добавление)
Да, еще заметил, что у вас в примере в таблице всего две колонки, а вы колспаном делите как-будто их три. Это неверно.
5. Aricus - 06 Марта, 2015 - 17:00:05 - перейти к сообщению
DelphinPRO пишет:

CODE (css):
скопировать код в буфер обмена
  1. table { width: 100%; }
  2. /* или */
  3. table { width: 500px; }

Да, еще заметил, что у вас в примере в таблице всего две колонки, а вы колспаном делите как-будто их три. Это неверно.

width: 100% у меня уже задано.
Ну, я хочу сделать так, чтобы в первой строке была шире вторая колонка, а в последней - первая, и при этом они были в одной таблице, потому так и сделал. По результату я понял, что это не правильно, потому и спрашиваю, есть ли другое решение проблемы кроме вставления пустой строки?
6. DelphinPRO - 06 Марта, 2015 - 18:00:09 - перейти к сообщению
Нет. таким образом расставить colspan'ы не получится.
Как минимум одна строка нужна с полным набором колонок.
Но в эти пустые ячейки вовсе необязательно вставлять пиксельные картинки. Они могут быть реально пустыми ячейками.

 

Powered by ExBB FM 1.0 RC1