Как создать внутренний скос таблицы в HTML / CSS?

Question

Я разрабатываю этот макет форума, в котором у меня есть хороший дизайн для рисования таблиц форума, однако я не уверен, что это легко сделать в HTML / CSS.

Прежде чем я продолжу рисовать весь макет, мне нужно знать, достижимо ли это и как, иначе, мне придется отбросить этот эффект и переосмыслить вещи ...

Например, у меня сейчас такой дизайн:

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

Как это можно сделать?

Answer 1

CSS может сделать что-то подобное очень легко, если вам не нужно масштабировать градиент по вертикали при увеличении размера таблицы. Ниже приведен пример, который вы могли бы использовать, чтобы получить эффект, который вы изобразили выше.

ОБНОВЛЕНИЕ: Я почему-то не видел скосов (наверное, я должен винить это слишком поздно ночью и мое зрение было слишком размытым). Мне пришлось увеличить масштаб, чтобы действительно увидеть их, но я обновил свое решение, чтобы соответствовать. Вам нужно добавить дополнительный тег "div", чтобы это решение работало, но это возможно, хотя я не думаю, что оно работает слишком сильно, если ваше изображение показано. Это будет работать довольно прилично, хотя. Внизу я включаю некоторый скрипт jQuery, который уберет необходимость в дополнительном теге <div />.

Для разметки вы бы использовали что-то вроде этого:

<table cellspacing="0">
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class="side"><div class="bevel">lorem</div></td><td class="side"><div class="bevel">ipsum</div></td><td class="main"><div class="bevel">dolor sit amet, consectetur</div></td></tr>
</table>

И в вашей таблице стилей вы бы использовали что-то вроде этого:

td {
    border: 1px solid #777;
}

.bevel {
    background: url('img.png') top left repeat-x;
    margin: -1px;
    border-top: 1px solid #fbfbfb;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #e8e8e8;
}

.side {
    width: 30px;
}

.main {
    width: 170px;
}

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

Для изображения сделайте его шириной 1px. Это повторится, чтобы соответствовать ширине ячейки. Если вы хотите, чтобы градиент растягивался вертикально, вам не повезло. CSS не может масштабировать изображения, только повторять их. Чтобы сделать вертикально масштабированное фоновое изображение, вам потребуется либо кошмарная разметка, либо какой-то JavaScript, чтобы он работал.

Чтобы избавиться от супа тега <div />, вы можете использовать jQuery для вставки тегов, чтобы не загромождать источник. Все, что вам нужно сделать - это добавить класс 'outerBevel' к тегам <td />, а затем вызвать этот скрипт jQuery (если вы используете jQuery. Я уверен, что другие API JavaScript могут делать подобные вещи):

$('.outerBevel').wrapInner('<div class="bevel"></div>');

Answer 2

Для макета стандартный HTML table тег делает все это, и также является подходящим использованием для него.

Чтобы получить желаемый эффект границы, взгляните на различные опции CSS-рамки: http://www.w3schools.com/css/css_reference.asp#border

Answer 3

Возможно, вы захотите сделать что-то вроде этого:

table#mytable td {
  border-style: inset;
  border-width: 3px; /* or whatever width you want */
}