Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Согласования ширины таблицы и заголовка, table & caption 
:(
    Опции темы
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 в массы.
PM MAIL WWW   Вверх
SelenIT
Дата 19.5.2008, 02:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


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

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



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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Sannis
Дата 20.5.2008, 23:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



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

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


--------------------
Я Критик Джим, раньше писал моды для IPB 1.3.x-2.3.x, а теперь продвигаю Node.js в массы.
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0582 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.