Первый td растягивается на всю ширину по умолчанию из-за особенностей работы таблиц в HTML.
В HTML элементы таблицы организуются в виде иерархической структуры: таблица (table) содержит одну или несколько строк (tr), а каждая строка содержит одну или несколько ячеек (td или th).
Когда HTML-движок рендерит таблицу, он стремится обеспечить равномерное распределение доступного пространства по ширине ячеек в строке. По умолчанию, если в строке есть ячейки без заданной ширины, вся доступная ширина будет равномерно распределена между ними.
Следовательно, если первой ячейке в строке не задана ширина (width), она займет все доступное пространство. По сравнению с этим, остальные ячейки, возможно, будут иметь пробелы на боковых сторонах, чтобы уравнять общую ширину строки.
Но это поведение можно изменить, если явно задать ширину первой ячейки. Для этого можно использовать атрибут width или CSS свойство width.
Примеры:
HTML атрибут:
<table>
<tr>
<td width="50%">Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
CSS свойство:
<style>
td:first-child {
width: 50%;
}
</style>
<table>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>
Эти примеры показывают, как изменить ширину первой ячейки, чтобы она не растягивалась на всю ширину таблицы.
В заключение, по умолчанию первая ячейка в строке занимает всю доступную ширину, но это поведение можно изменить, указав явно ширину ячейки.