Почему столбец таблицы меняет размер и как его остановить?

Question

У меня есть таблица с редактируемым содержимым div в каждой строке, у которого есть colspan при вводе в области содержимого, 1-й столбец уменьшается в размере, изменяя размер div. в конце концов это слово переносится Я не хочу, чтобы расположение таблицы изменилось (по горизонтали). Как я могу предотвратить это?

<table style="width: 100%">
    <thead>
        <tr><th>id</th><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td>2</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

Этот без первого столбца не делает.

<table style="width: 100%">
    <thead>
        <tr><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

Answer 1

Столбцы таблицы всегда динамически изменяют ширину из-за их содержимого, если их width не определено. В вашем случае width определяется только для div внутри td (и с относительным значением: 100%, которое просто заполняет td и которое также вызывает td, чтобы расширить, если есть больше контента, так как td сам не имеет никакого параметра wifth), который не влияет на td, следовательно, ширина изменяется в соответствии с контентом.

Answer 2

Используемое мной решение использует точки из @ G-Cyr и @Amanullah Tanweer

HTML

<table class="has-comments">
    <thead>
        <tr><th>id</th><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td>2</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

CSS

table.has-comments {
    width: 100%;
}

1009 * Javascript *

$("table.has-comments tr:first-child th").each(function(index){
    let element = $(this);
    let width = element.width();
    element.css("width", width + "px");
});
$("table.has-comments").css("table-layout", "fixed");

В результате я разрешаю странице настроить таблицу (ширина 100%), а затем javascript / jQuery исправит ширину столбцов. Наконец, макет таблицы установлен на фиксированный. Я знаю, что это не самое эффективное решение, но моя страница динамически обрабатывается jsp и может изменяться день ото дня.

Answer 3

Попробуйте добавить ширину к заголовкам таблицы следующим образом

<th style="width: 100px">

Таким образом, ширина столбца не изменится при уменьшении размера содержимого.