VPF::Согласования ширины таблицы и заголовка

Sannis

Дата 17.5.2008, 00:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 375
Регистрация: 14.8.2007
Где: Москва

Репутация: нет
Всего: 13

Использую следующий код:

Код

<table class="table w-100">
  <caption>Members</caption>
  <thead>
    <tr>
      <th/>
      <th>E-mail</th>
      <th>Pass hash</th>
      <th>Pass salt</th>
      <th/>
      <th/>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>[email protected]</td>
      <td>134a3bb0ece2e91f91c39c060cd6c120</td>
      <td>123456</td>
      <td>0</td>
      <td/>
    </tr>
  </tbody>
</table>

Код

.w-100 {
    width: 100%;
}

table.table {
    border-collapse: collapse;
    border: 1px solid #cccccc;
    margin-bottom: 10px;
    caption-side: top;
}

table.table tbody {
    {b}margin: 0;{/b}
}

table.table tr {
    border: 0;
}

table.table caption {
    padding: 2px;
    border: 1px solid #cccccc;
    color: #000000;
    background: #cccccc;
    margin-left: -1px;
    font-weight: bold;
    text-align: center;
}

/* Opera 6+ hack */
@media screen and (min-width: 0px) {
    table.table caption {
        margin: 0;
    }
}

table.table tr th {
    padding: 2px;
    border: 1px solid #cccccc;
    color: #000000;
    font-weight: bold;
    text-align: center;
}

table.table tr td {
    padding: 2px;
    border: 1px solid #cccccc;
}

К сожалению, если таблица шире заголовка, то всё выглядит как мне хочется( smile

), но если маленькая, то заголовок получается шире таблицы. к сожалению мои попытки выставить нулевые допуски у тела или 100% ширину не увенчались успехом. Возможно приведённый на скрине пример и не блещет оригинальностью, но возможно кто-то знает более действенный способ?

P.S. Или может быть не стоит использовать caption, а заменить всё на див(див,таблица)?

Присоединённый файл ( Кол-во скачиваний: 17 )

table_caption.gif 3,14 Kb

--------------------

Я Критик Джим, раньше писал моды для IPB 1.3.x-2.3.x, а теперь продвигаю Node.js в массы.

SelenIT

Дата 19.5.2008, 02:53 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

По смыслу, вроде бы, caption оправдан. Хотя по дизайну, имхо, вполне можно сделать и просто объединенную ячейку в thead...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Sannis

Дата 20.5.2008, 23:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 375
Регистрация: 14.8.2007
Где: Москва

Репутация: нет
Всего: 13

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

Зашёл сказать, что правильнее всё равно оказалось выставить таблице ширину, тогда и проблемы такой нет.

--------------------

Я Критик Джим, раньше писал моды для IPB 1.3.x-2.3.x, а теперь продвигаю Node.js в массы.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »