Перенос слов в таблице изменяет размер ячейки

Question

У меня есть таблица с 2-мя колоннами, одна из которых имеет word-wrap: break-word:

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border: 1px dotted gray; 
 
} 
 

 
table td { 
 
    border: 1px solid blue; 
 
} 
 

 
table td:nth-child(2) { 
 
    word-wrap: break-word; 
 
}

<table> 
 
    <tr> 
 
     <td>Column1</td> 
 
     <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td> 
 
    </tr> 
 
</table>

Я хотел бы сохранить ширину первого столбца до минимума , а второй столбец расширяется, чтобы соответствовать остальной части таблицы.

Но word-wrap: break-word работает только в том случае, если я установил table-layout: fixed и заставляет все столбцы иметь равные размеры. Как я могу достичь того, чего хочу, без явной установки значения ширины в первом столбце?

Answer 1

Вы можете достичь этого, используя атрибут width<td>, как показано ниже.

table { 
 
    table-layout: fixed; 
 
    border: 1px dotted gray; 
 
} 
 
table td { 
 
    border: 1px solid blue; 
 
} 
 
table td:nth-child(2) { 
 
    word-wrap: break-word; 
 
    width: 100%; 
 
    max-width: 1px; 
 
}

<table> 
 
    <tr> 
 
    <td>Column1</td> 
 
    <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td> 
 
    </tr> 
 
</table>

Answer 2

Просто добавьте один бит CSS, код отображаются в, попробуйте его

table td { 
border: 1px solid blue; 
} 

table td:nth-child(1) { 
width:100px; //your value 
} 

table td:nth-child(2) { 
word-wrap: break-word; 
} 

Надеется, что это достаточно для вас

Regds ..