Таблица, сделай это красиво…
Не часто приходится заниматься таблицами, но без них, как вы понимаете, иногда просто никак. Описываемый сегодня прием известен давно, правда редко находит применение, может быть, не все знают, а может просто нет такой необходимости.
Что больше всего напрягает при использовании таблиц?
Есть, скажем, матрица 3*3, и надо исключить ячейку или даже строку, что мы делаем?
Начинаем объединять эти самые ячейки, а занятие это ну очень муторное. В таких случаях, понятное дело, все зависит от конкретной ситуации, можно прибегнуть к некоторым хитростям, что является весьма действенным методом сокрытия ячеек и строк, это позволяет, не прибегая собственно к правке html-кода, чуть упростить процесс.
Скриншот.
Оформление может быть любым, но нас интересует всего две строчки в таблице стилей, а именно:
.hidden {visibility:hidden;}
.none {display:none;}
Подставляя тот или иной класс в ячейки или строку, мы получаем различное расположение, как ячеек, так и строк.
visibility:hidden; скрывает ячейку или строку, но место, зарезервированное под них, остается.
display:none; проделывает то же самое, но происходит сдвиг и по вертикали и по горизонтали и оставшиеся ячейки или строки занимают освободившееся место.
Есть еще и visibility:collapse, не поддерживается Internet Explorer, но по действию, применение этого правила, аналогично display:none;
Берем на вооружение. Пример