Как заставить выходить таблицу за края родительского контейнера

334

14 марта 2017, 12:32

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

Answer 1

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

.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>

Answer 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вызов функции другого фрейма

Есть страница с фреймами:

309

HTML

зацикливание в Chrome при редиректе (PHP - JS)

Проблема: периодически появляется зацикливание в СHROMEЕсть страница поиска на сайте

232

HTML

Резиновая шапка с помощью flexbox

Нужно сделать шапку, чтобы при любом разрешении экрана расстояние между элементами было одинаковымЯ решил делать с помощью flex (Может есть...

235

Многопользовательский чат на C#

Добрый день

1140