CSS таблица выходит за область [закрыт]

144

13 ноября 2018, 06:50

Есть обычная таблица html, но при масштабировании ее часть выходит за пределы видимости. Как сделать так чтобы таблица не выходила за пределы, а просто сужалась?

Answer 1

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

.wrap { 
  position: relative; 
  overflow-x: auto; 
  width: 100%; 
  max-width: 100%; 
} 
 
table { 
  width: 100%; 
  max-width: 100%; 
  border-collapse: collapse; 
} 
 
td { 
  padding: 1rem; 
  border: 1px solid #eee; 
}

<br>... 
<br>какой-то конетнт 
<br>... 
<br> 
<br> 
 
 
<div class=wrap> 
  <table> 
    <thead> 
      <tr> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
        <td>ячейка</td> 
      </tr> 
    </tbody> 
  </table> 
</div> 
 
 
<br> 
<br> 
<br>... 
<br>какой-то конетнт 
<br>...