Scroll внутри DIV, в котором таблица больше этого DIV

[Bava]

Всем привет!

 

Есть DIV, в котором находится таблица.

 

По идее таблица должна выходить за пределы этого DIV, а чтобы увидеть остальную часть таблицы нужно проскроллить.

 

У меня таблица встраивается в пределы DIV и не хочет выходить за его пределы. Пытался менять width у элементов таблицы, ставить overflow: scroll у DIV но ничего не выходит. Таблица все также пытается втиснуться в DIV.

 

Как сделать так, чтобы таблица имела определенную длину, показывала только часть себя и появился скролл для передвижения по этому DIV.

 

как-то так:

[Yazon_Nile]

на таблицу ширину задай. А на блок - оверфлоу-ауто

[npofopr]

И выкладывать надо код, а не картинки, а лучше и то и другое.

[mrnobody]

Можете посмотреть как в бутстрапе реализовано — http://getbootstrap.com/css/#tables-responsive

[Bava]

на таблицу ширину задай. А на блок - оверфлоу-ауто

Спасибо, сработало!

 

И выкладывать надо код, а не картинки, а лучше и то и другое.

 

ок, учту в следующий раз

 

Можете посмотреть как в бутстрапе реализовано — http://getbootstrap....bles-responsive

уже работает, ну если что загляну

[Bava]

А как сделать чтоб у ячейки таблицы TD на левой стороне была белая граница в 1 пкс, на правой серая в 1 пкс и чтоб соседние TD не сливались в одну общую границу

 

Как на этой картинке. У меня почему то при установке левой и правой границы отображается только одна серая. border-collapse установил separate, border-spacing тоже пробовал менять ..

 

 

bava.ho.ua/rasp/ -- веб страница

Edited April 4, 2014 by Bava

[mrnobody]

У вас в reset.css задано:

table {  border-collapse: separate;  border-spacing: 0;} 

или закоментите border-collapse или пропишите для #t-header border-collapse: separate;

Лучше второй вариант

#t-header {  border-collapse: separate;}

http://htmlbook.ru/css/border-collapse

 

 

PS: Я смотрю у вас в разметке одни айдишники — это плохо (

Edited April 4, 2014 by mrnobody

[Bava]

mrnobody, спасибо, помогло.

 

А почему id плохо?

[Q4Dizzy]

ID плох по двум причинам - 1, это то, что он не может повторятся, 2 - у них высокий приоритет, нужно как минимум 11 классов, чтобы перебить 1 ид, и то смотря в каком браузере.

Если я не прав, поправьте.

 

Если уж верстаете ИД, то в стилях желательно прописывать такой вариант:

 

Вместо 

div#block {}

вот так:

div[id="block"] {}

Edited April 5, 2014 by Q4Dizzy

[SelenIT]

нужно как минимум 11 классов, чтобы перебить 1 ид

Как минимум 256

 

в стилях желательно прописывать такой вариант

Только ради уменьшения специфичности, сильно жертвуя производительностью селектора? Имхо, нелогично. Если уж вообще использовать id в стилях, то осознанно и с умом (т.е. навешивая на него только уникальные стили, кот. не придется переопределять ни при каких условиях), для прочих случаев есть классы (самый универсальный подход), на крайняк data-атрибуты и т.д.

[Q4Dizzy]

Только ради уменьшения специфичности, сильно жертвуя производительностью селектора? Имхо, нелогично.

 

 

значение приоритета значительно ниже с таким видом записи. да и ИМХО ид лучше использовать, работая с формами, где они требуются или чисто для скриптов. а так согласен, лучше классы использовать.

Edited April 6, 2014 by Q4Dizzy

[SelenIT]

значение приоритета значительно ниже с таким видом записи

Да, это я и имел в виду под специфичностью (так эти числа называются в спецификации). Но в плане скорости селектор по атрибуту заметно уступает селекторам по id и классам. Конечно, эта разница становится существенной лишь в редких случаях ну очень уж нагруженных проектов, но, имхо, совсем забывать об этом тоже не стоит

[Q4Dizzy]

Но в плане скорости селектор по атрибуту заметно уступает селекторам по id и классам.

 

 

а есть ссылочка, где это почитать можно?

[SelenIT]

Есть вот такая старая статья с «рейтингом скорости» селекторов. И есть тест сравнения скорости выборки по классу и по атрибуту в jQuery (понятно, что это другая задача, но, если я не заблуждаюсь, лежащий там в основе document.querySelectorAll использует тот же алгоритм выборки элементов по селектору, что и рендерер). Конечно, оптимизировать селекторы принято в последнюю очередь, они редко становятся узким местом… но всё же изначально вешать самую основу оформления на заведомо медленный селектор лично я бы не стал

[Q4Dizzy]

Жаль, что на английском.. переводчик мне в помощь, а так спасибо

[Bava]

Здравствуйте, еще раз благодарю всем за помощь.

 

Возникла еще одна проблема. ссылка на веб-страницу

 

Мне нужно перевернуть в некоторых местах текст

transform: rotate(-90deg);

при этом сама ширина блока не меняется. Как сделать чтоб как на следующей картинке?

 

 

я пробовал делать переворачиваемый Div абсолютно позиционированным, но при позиционировании все эти divы смещаются относительно окна браузера, хотя для родителя я устанавливал position: relative;

 

Подскажите пожалуйста способ сделать маленькую ширину

Edited April 8, 2014 by Bava

[Bava]

help

[Bava]

Почему нижняя таблица не переносится вправо, хотя я поставил float: left; и у соседней таблицы тоже float: left;. Чтоб увидеть эту нижнюю таблицу пролистайте немного вниз

 

Ссылка на веб страницу

[mrnobody]

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

[Bava]

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

 

о, может так и сделаю

[Bava]

Почему верхние заглавные ячейки ("1 ПІ", "1 ІНФ" и т.д.) и пустые ячейки содержимого, несмотря на то что им через CSS установлена ширина 170px, скомпилированный (просчитанный) все таки меньше.

 

При чем их ширина зависит от той какая стоит у таблицы в целом, как сделать чтоб было четко 170px у всех?

 

Ссылка на веб-страницу

Edited April 14, 2014 by Bava

[mrnobody]

#t-content {

  table-layout: fixed;

}

[Bava]

Спасибо!!