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 » » Вопросы новичков » Ширина ячеек таблицы

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

1. Арикус - 12 Августа, 2015 - 14:54:59 - перейти к сообщению
Существует большая таблица. Я заменил содержимое ячеек на ... (последняя строчка - контрольная, чтобы не нарушалась структура таблицы, если все строки будут объединённые)

CODE (html):
скопировать код в буфер обмена
  1. <table class="wide" cellspacing="15" cellpadding="10" border="0">
  2.         <tr class="borderRed"><td class="tdUser">...</td> <td colspan="2">...</td> </tr>
  3.         <tr> <td colspan="3">...</td></tr>
  4.         <tr> <td colspan="3">...</td> </tr>
  5.         <tr class="borderGreen"> <td colspan="2">...</td> <td class="tdVar">...</td></tr>
  6.         <tr> <td class="tdUser">&nbsp;</td> <td>&nbsp;</td> <td class="tdVar">&nbsp;</td></tr>
  7. </table>

где
CODE (html):
скопировать код в буфер обмена
  1. .wide {width:100%}
  2. td.borderRed, div.borderRed, tr.borderRed td {border: 3px solid #ff0000; border-radius:10px}
  3. td.borderGreen, div.borderGreen, tr.borderGreen td {border: 3px solid #00cc00; border-radius:10px}
  4. td.tdUser {width:20%; font-size:larger; line-height: 1.1}
  5. td.tdVar {vertical-align:middle; text-align:center; width:15%}

Проблема в том, что, несмотря на указанное width:15% , последняя колонка делит свободное место (в предпоследней строчке) со средней, в результате чего она примерно в 2 раза шире. Как сделать так, чтобы при наличие свободного места колонки не превышали установленной ширины? max-width пробовал, совсем не работают.
2. DelphinPRO - 12 Августа, 2015 - 16:33:20 - перейти к сообщению
CODE (css):
скопировать код в буфер обмена
  1. table {
  2.   table-layout: fixed;
  3. }

(Добавление)
вот, накидал примерчик ваш исправленный
http://jsfiddle[dot]net/rfgfr7qn/
3. Арикус - 13 Августа, 2015 - 12:38:25 - перейти к сообщению
DelphinPRO
CODE (SQL):
скопировать код в буфер обмена
  1. TABLE.wide {table-layout: fixed;}

Каким-то странным образом добавление этой строчки ещё больше расширило последнюю колонку.
Создание нового класса и его применение только к рассматриваемой таблице не изменило ситуацию по сравнению с первоначальной
4. DelphinPRO - 13 Августа, 2015 - 16:43:20 - перейти к сообщению
Арикус
Вы видимо поленились посмотреть мой пример по ссылке... печально...
5. Арикус - 14 Августа, 2015 - 14:45:31 - перейти к сообщению
DelphinPRO
Теперь увидел, раньше просто не обратил внимание.
В вашем варианте установление ширины происходит очень жёстко: если, к примеру, в правой колонке находится длинное слово большим шрифтом, то его край вылезает за таблицу.
Нет ли более мягкого варианта, который ограничивал бы только распределение свободного места?
6. DelphinPRO - 14 Августа, 2015 - 21:10:10 - перейти к сообщению
Попробуйте убрать fixed, а контрольную строку пустых ячеек поставить первой, как у меня в примере. Возможно получится.
(Добавление)
И кроссбраузерность проверьте. Я что-то уже не уверен в этом.
7. Арикус - 14 Августа, 2015 - 22:29:14 - перейти к сообщению
DelphinPRO
Контрольную строку первой уже сделал. Без fixed вид как в первоначальном варианте.
Видимо, придётся оставлять как есть. Ну да ладно, это не принципиальный момент. Просто выглядит криво.

 

Powered by ExBB FM 1.0 RC1