Ну чего уж греха таить, взял та и сделал, подумаете. Ан-нет. Тут не так все просто.
Появилась у меня такая задача: сверстать вот такую таблицу
Написал код разметки, все как положено. Стал думать, как же сделать раздельную границу. Первое что пришло в голову — поиграться padding. Только это ничего не дало (учитесь на чужих ошибках) — как мы знаем, padding на границу не влияет, влияет margin, который, к сожалению, в таблицах не актуален.
Граница, в моем случае, нижняя граница, осталась нетронута, как дева Мария. А попробовать решил, даже зная, что не получится. Ну чем черт не шутит.
Далее, непонятно откуда, в пустыню моих размышлений забрела одинокая мысль (пишу таблицу эту в пол-второго ночи — ничерта уже не соображаю): весь текст закинуть в span и для него прописывать в стилях такое
Что было проделано: задана нижняя граница для span, задана ширина по всей ширине ячейки с помощью свойства display, ну и отступ для границы. Получилось вот что.
Все здорово, НО. Есть но. Границы выравниваются не по низу ячейки а по низу span. Вариант улетел в трэш за своим предшественником.
Во время следующего брейншторма, я снова родил идею. Что если взять да и убрать такое родное нам CSS свойство таблицы — border-collapse, заменить его на separate и сделать 3 границы ячейки прозрачными, ну а нижнюю нужного цвета. Как оказалось, с этой стороны ларчик также не открывался. Получалась забавная вещь. Словами этого на описать. Картинка ниже. Скажем, этот бок меня и привел к решению задачи.
Если будет задание сделать красивые горизонтальные границы с горизонтальным градиентом без лишней мороки — вот оно :)
Тут штука в том, что границы в таблицах соединяются как оконная рама — углы срезаны под некоторым углом.
Последний вариант меня подтолкнул к решению. Очевидно было одно — решение кроется в стилях ячейки или в самих ячейках. И правда, так и оказалось. Решение простое и элегантное вышло. Как обычно.
Надо создать td в первом tr таблицы после каждой ячейки с содержимым. Добавить аттрибут rowspan=«50». На самом деле значение неважно, но взял с запасом. Потом добавить этой же ячейке класс какой-нить. У меня это sep. И еще надо прописать этой ячейке необходимую ширину, то бишь наш отступ.
код получился такой
Таким образом мы создали ячейку, которая проходит через 50 нижних ячеек и не имеет границ. То есть по сути разделяет столбцы. Думаю, это решение можно применять в любом из вариантов: для разделения по-горизонтали или по-вертикали.
P.S. адрес — это адрес моей бывшей. Не советую туда соваться, себе дороже будет:) а чего написал? хз. первое что в голову пришло как вариант рыбного текста. Пишу сюда, по-большому счету, потому что хочу поделиться решением, а не ради «создания еще одного поста на хабре». Все фуфло-комменты можете оставить себе. Спасибо.
Появилась у меня такая задача: сверстать вот такую таблицу
Написал код разметки, все как положено. Стал думать, как же сделать раздельную границу. Первое что пришло в голову — поиграться padding. Только это ничего не дало (учитесь на чужих ошибках) — как мы знаем, padding на границу не влияет, влияет margin, который, к сожалению, в таблицах не актуален.
Граница, в моем случае, нижняя граница, осталась нетронута, как дева Мария. А попробовать решил, даже зная, что не получится. Ну чем черт не шутит.
Далее, непонятно откуда, в пустыню моих размышлений забрела одинокая мысль (пишу таблицу эту в пол-второго ночи — ничерта уже не соображаю): весь текст закинуть в span и для него прописывать в стилях такое
display:block;
border-bottom:1px solid #8EBCBC;
margin:10px;
Что было проделано: задана нижняя граница для span, задана ширина по всей ширине ячейки с помощью свойства display, ну и отступ для границы. Получилось вот что.
Все здорово, НО. Есть но. Границы выравниваются не по низу ячейки а по низу span. Вариант улетел в трэш за своим предшественником.
Во время следующего брейншторма, я снова родил идею. Что если взять да и убрать такое родное нам CSS свойство таблицы — border-collapse, заменить его на separate и сделать 3 границы ячейки прозрачными, ну а нижнюю нужного цвета. Как оказалось, с этой стороны ларчик также не открывался. Получалась забавная вещь. Словами этого на описать. Картинка ниже. Скажем, этот бок меня и привел к решению задачи.
Если будет задание сделать красивые горизонтальные границы с горизонтальным градиентом без лишней мороки — вот оно :)
Тут штука в том, что границы в таблицах соединяются как оконная рама — углы срезаны под некоторым углом.
Последний вариант меня подтолкнул к решению. Очевидно было одно — решение кроется в стилях ячейки или в самих ячейках. И правда, так и оказалось. Решение простое и элегантное вышло. Как обычно.
Надо создать td в первом tr таблицы после каждой ячейки с содержимым. Добавить аттрибут rowspan=«50». На самом деле значение неважно, но взял с запасом. Потом добавить этой же ячейке класс какой-нить. У меня это sep. И еще надо прописать этой ячейке необходимую ширину, то бишь наш отступ.
код получился такой
table tr td:not(.sep) {
padding-top: 20px;
padding-bottom: 8px;
border-bottom: 1px solid #8EBCBC;
}
.sep {
width: 20px;
}
}Таким образом мы создали ячейку, которая проходит через 50 нижних ячеек и не имеет границ. То есть по сути разделяет столбцы. Думаю, это решение можно применять в любом из вариантов: для разделения по-горизонтали или по-вертикали.
P.S. адрес — это адрес моей бывшей. Не советую туда соваться, себе дороже будет:) а чего написал? хз. первое что в голову пришло как вариант рыбного текста. Пишу сюда, по-большому счету, потому что хочу поделиться решением, а не ради «создания еще одного поста на хабре». Все фуфло-комменты можете оставить себе. Спасибо.