Блог

Я создаю редактируемую ячейку внутри таблицы, однако, несмотря overflow: auto на то, что ввод css там просто заставляет ее расширяться очень неудобным способом.

Как мне заставить его придерживаться начального размера ячейки, при этом полосы прокрутки отображаются по мере необходимости? Предпочтительно, чтобы это было без заданных значений пикселей для ширины / высоты, чтобы вся таблица оставалась на экране между различными разрешениями или увеличением и уменьшением масштаба (управление колесо мыши).

 html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
.table {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
cell {
  overflow: auto;
} 

 <table class="table">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>
      <div contenteditable="true" class="cell">Editable cell</div>
    </td>
    <td>14</td>
    <td>10</td>
  </tr>
</table> 

Вместо использования <div> with contenteditable="true" вы можете использовать a <textarea> , который показывает полосы прокрутки, как только текст выходит за границы, как показано ниже.

СОВЕТ: Используя <textarea> , вы можете увеличить количество строк, которые видны по умолчанию.

 html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
.table {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
cell {
  overflow: auto;
} 

 <table class="table">
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>
      <textarea id="w3review" name="w3review" rows="3" cols="50">Editable Text.</textarea>
    </td>
    <td>14</td>
    <td>10</td>
  </tr>
</table> 

Вместо <table> этого попробуйте использовать CSS-Grids, поскольку они могут иметь фиксированный размер, и вы можете делать именно то, что просите.

Хорошие ресурсы для начала с этого:

• Сад сетки
• CSS-хитрости
• MDN

ПРИМЕЧАНИЕ: я понимаю, что я не отвечаю на вопрос как есть, но я пытаюсь использовать CSS-сетки каждый раз, когда кто-то использует HTML-таблицы для отображения и выравнивания, поскольку вместо этого следует использовать CSS.