3

Здравствуйте!

Есть элемент table, в строчках которого может быть некоторое число ячеек. Может быть 3 ячейки, может быть 5 или 10, но в разных строчках обязательно одинаковое количество. Ну то есть представляем нормальную, человеческую таблицу, как в экселе.

Как мне сделать через css так, чтобы:

  1. У таблички была некоторая фиксированная ширина, скажем 700px;
  2. У каждой колонки была некоторая фиксированная ширина, скажем 300px;
  3. Если суммарная ширина ячеек больше чем ширина таблицы, то должен появляться горизонтальный скролл. Собственно это у меня никак не получается: пока ширина колонок равномерно сокращается если превышает ширину таблицы, выставление свойства overflow не помогает

Иллюстрация к тому, что я хочу: http://jsfiddle.net/yt6169s1/

<div class="table-wrapper">
    <table class="mytable">
        <tr>
            <th class="mytd">1</th>
            <th class="mytd">2</th>
            <th class="mytd">3</th>
            <th class="mytd">4</th>
            <th class="mytd">5</th>
            <th class="mytd">6</th>
            <th class="mytd">7</th>
        </tr>
        <tr>
            <td class="mytd">1</td>
            <td class="mytd">2</td>
            <td class="mytd">3</td>
            <td class="mytd">4</td>
            <td class="mytd">5</td>
            <td class="mytd">6</td>
            <td class="mytd">7</td>
        </tr>
    </table>
</div>

.table-wrapper {
    width: 700px;
}

.mytable {
    border-collapse: collapse;
    overflow: auto;
}

.mytd {
    width: 300px;
    border: 1px solid black;
}

Соответственно я хочу чтобы на примере по ссылке было видно только 1ю, 2ю колонки шириной 300px и часть 3й шириной 100px, а остальные прокручивались.

Я могу сделать это только через css, не применяя javascript и не меняя таблицу на структуру из дивов? Совместимость со всяким старьем необязательна.

Попробую переформулировать еще получше: Мне нужна некоторая область ограниченной ширины (скажем 700 px) в которую будет влезать несколько колонок фиксированной ширины (т.е. ширина колонок точно такая какую я указал, сказал 200px у каждой колонки - и будет честных 200px у каждой колонки). И если колонок больше чем надо (скажем 5), то чтобы появлялся горизонтальный скролл.

Другими словами мне надо примерно как здесь: http://jsfiddle.net/qr6e61bw/ только с таблицей а не с дивами

2
  • Ширину table задать в 2100px?
    – Visman
    28 июл 2015 в 14:56
  • @Visman, ненене. Сейчас попробую еще переформулировать: мне нужна некоторая область ограниченной ширины в которую будет влезать несколько колонок фиксированной ширины (т.е. ширина колонок точно такая какую я указал). И если колонок больше чем надо, то чтобы появлялся горизонтальный скролл. 29 июл 2015 в 8:13

1 ответ 1

2

В таблице пишешь table-layout: fixed. В этом режиме ширина таблицы не пересчитывается при изменении или вписывании в родительский регион, а имеющийся overflow: auto даст скроллбар снизу. Детали тут.

.mytable {
    border-collapse: collapse;
    overflow: auto;
    table-layout: fixed;
}

Адпейт: Причина оказалась в другом - атрибут width в колонке устанавливает максимальную ширину колонки, причем минимальная ширина ограничена элементами внутри колонки. В данном случае в колонках по одному символу, и минимальная ширина оказывается недостаточной для появления скролла. Лечится прописыванием min-width в стиль mytd:

.mytd {
    min-width: 300px;
    border: 1px solid black;
}

Для задания точной ширины колонки желательно использовать max-width или width вместе с min-width.

6
  • @Abyx Уговорили.
    – Vesper
    28 июл 2015 в 18:20
  • @Vesper я так уже пробовал и оно не работает так как я хочу, слегка обновил вопрос, может стало понятнее 29 июл 2015 в 8:16
  • @Отчаяние Обновил ответ, проверьте.
    – Vesper
    29 июл 2015 в 8:41
  • @Vesper, ага, спасибо, Вы очень помогли, плюсану как репутация появится) Возможно стоит добавить в ответ, что overflow: auto надо установить не самой таблице как в моем примере, а оборачивающему ее диву, да и table-layout: fixed по ходу не нужен: jsfiddle.net/73osmpet 29 июл 2015 в 9:00
  • @Отчаяние Да, сам проверял на jsfiddle, пока искал решение. Приятная штука, надо сказать. А вот на что вешать overflow: auto - определяет дизайнер, например, если в том диве нет ничего, кроме таблицы, неважно, куда вешать, а если есть, то надо вешать на див, иначе таблица ужмется по ширине.
    – Vesper
    29 июл 2015 в 9:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.