Сделайте содержимое ячейки таблицы больше ячейки, не меняя ширины ячейки.

Question

Поскольку название может быть запутанным, я собираюсь объяснить, что я имею в виду, используя некоторые изображения.

Вот что моя ситуация выглядит следующим образом:

Все это находится внутри таблицы и коробки все принимают вверх ширину таблицы. Но мне нужно добиться того, чтобы при определенных условиях поле данных увеличивалось до полной ширины экрана, потому что контент может быть очень большим. Это должно выглядеть так:

Конечно, поскольку весь материал находится в таблице, изменение ширины поля данных также изменяет ширину ячейки таблицы и, следовательно, ширину других ячеек, что также приводит к росту текстовых полей и списков:

Итак, есть ли способ сохранить ячейки фиксированного размера, в то время как поле данных будет расти над границами ячейки/таблицы? Я думал об использовании позиционирования или что-то в этом роде, но на самом деле это не работает. И я не могу изменить компоновку таблицы, поскольку это не моя работа, и я просто «очищаю ее».

Answer 1

Как насчет применения max-width для tds, чтобы они не расширялись?

table { 
 
    border-spacing: 0px; 
 
    border-collapse: collapse; 
 
} 
 
table td { 
 
    max-width: 100px; /* applied max-widht here */ 
 
    border: 1px solid red; 
 
} 
 
table input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 
#dd { 
 
    width: 300px; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <input type="text" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select id="dd"> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>