2

Есть таблица 4-мя столбцами. Все столбцы имеют одинаковую ширину. Хочу прикрутить кнопки вправо/влево на тот случай, когда таблица перестанет вмещаться по ширине в страницу, но вместо того чтобы выйти за пределы родителя (а для td я задал 33.333% ширину, т.е. в данном примере 4-я колонка должна уходить за пределы видимой части), в таблице обрезается ширина последней тдшки и получается примерно такой результат. Песочница здесь.

4
  • Скроллбар не устроит? Для кнопок уже нужен будет js.
    – labris
    13 мар 2017 в 8:03
  • @labris, не устроит) Загвоздка не в кнопках, их то я сделаю, а в том, что я описал выше)
    – Игорь
    13 мар 2017 в 8:05
  • Я смотрю, взяли вариант со скроллбаром :)
    – labris
    13 мар 2017 в 8:55
  • @labris, его здесь не будет) Родителю таблицы поставлю overflow: hidden, дальше оно будет просто листаться)
    – Игорь
    13 мар 2017 в 9:02

2 ответа 2

3

Есть подозрение, что ячейки нельзя сделать шире таблицы. Поэтому чтобы они выходили за пределы контейнера, ширину надо задавать самой таблице, а не ячйкам:

.container {
  width: 100%;
  overflow: auto;
}
table {
  width: 133.333%;
}
table td {
  border: 1px solid black;
}
<div class="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

3
  • думал о таком варианте. Минус в том, что задав ширину таблицы в 4 столбца по 33.333% (т.е. width выходит calc(100% + 33.333%), часть третьего столбца остается невидимой и при ресайзе ширина его отображаемой части меняется. В идеале такого быть не должно..
    – Игорь
    13 мар 2017 в 8:31
  • @Игорь, ну вот я поменял ширину на 133.333% - у меня на любом размере экрана полностью отображаются 3 ячейки. При ресайзе ничего не меняется. Или Вы что-то другое имели в виду? 13 мар 2017 в 8:40
  • нет, все верно. Сейчас у себя обновил - кажется, я где-то допустил ошибку. Благодарю вас за ответ :)
    – Игорь
    13 мар 2017 в 8:42
2

Рабочий вариант - сломать табличную верстку:

.container {
  width: 100%;
  overflow: hidden;
}
table {
  width:100%
}
table tr {
  white-space: nowrap;
}
table td {
  width: 33%;
  border: 1px solid black;
  display: inline-block;
}
<div class="container">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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