Jump to content
  • 0

Верстка обтекаемой таблицы


EDIsaev
 Share

Question

Доброго времени суток!

 

Прототип я сделал: http://jsfiddle.net/qRb52/

В нём несколько проблемок, которые хотелось бы решить.

  • во-первых когда окно браузера сужаем, ячейки таблицы тоже начинают сначала сужаться до минимума, как этого избежать, чтобы они оставались квадратными при сужении и просто появлялся скроллбар?
  • в браузере Opera (10.63 в моём случае) при выделении нескольких ячеек таблицы после каждой происходит мерцающее выделение всей таблицы до конца! (в Firefox этого эффекта нет и всё работает как надо). Как этого избежать в опере?

Заранее благодарен.

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
ячейки таблицы тоже начинают сначала сужаться до минимума

задать им размер, а внутри все обернуть в div, которому задать overflow:scroll;

Opera (10.63 в моём случае)
где вы такую нашли? Скорее всего никак. Ведь наверняка она ведет себя так с любой таблицей? Даже самой обычно?
Link to comment
Share on other sites

  • 0
задать им размер

думал об этом, пробовал дописывать

td{

  padding: 0 5px 0 5px;

  text-align: center;

  white-space: nowrap;

  width: 20px;

}

эффекта никакого

 

 

Скорее всего никак. Ведь наверняка она ведет себя так с любой таблицей? Даже самой обычно?

нет, только если div в котором таблица имеет display: inline-block; (это я деал для того, чтобы он оборачивал таблицу, т.к. ширина её меняется и он должен подстраиваться)

Edited by EDIsaev
Link to comment
Share on other sites

  • 0
table-layout + fixed

а в том же jsfiddle.net можете поправить?

добавил table-layout: fixed; и как в примере по ссылке пробовал задавать ширину в теге col

она всё равно как баян тянется и сужается

первый столбик желательно бы оставить не фиксированым, а чтобы от размера содержимого зависил

Edited by EDIsaev
Link to comment
Share on other sites

  • 0

klierik, да именно так, отдельно оно работает

а в моём примере выше это не работает... что-то там конфликтует... может inline-block или float:left; или ещё что-то

Интересно что именно надо поправить в приведённом примере, а не в голой таблице

Edited by EDIsaev
Link to comment
Share on other sites

  • 0

Это то же самое, что приедешь в сервис, спросишь почему у меня машина борохлит, они ответят, вот я показал мою рабочую, свою будь любезен, сам почини ;)

голую табличку я и сам делал и твой рабочий пример совмещал с вашим... Там конфликт какой-то. Какая-то тонкость, которой я просто не знаю, патч под оперу может нужен в какой строке. И если бы я её знал, может и темы бы тут не было.

я домой приду выложу ваш пример в моём, он так же не работает, как мой изначально

Edited by EDIsaev
Link to comment
Share on other sites

  • 0

На данный момент вот что вышло: http://jsfiddle.net/qRb52/1/

 

1. Табличка не тянется (в опере!... как надо работает), а в Firefox растягивается на всё окно за счет первого столбца... В опере первый столбик остаётся по ширине содержимого, как и должно быть

2. И баг с выделением в опере меня больше всего беспокоит

Link to comment
Share on other sites

  • 0

Выбрал 3 лучших форума и тишина везде)

Это лень? Или я так прохо описал? Ну задайте вопросы, я отвечу... Или пошлите туда, где народ поактивнее чтоли.

У меня сенсей по css находил выход из любой каверзной ситуации за несколько минут, жаль курсы кончились.

А вы тут профи все, найдите несколько минут своего бесценного времени)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy