I have a HTML table that I want to automatically set the width of the table columns, adjusting based on the content within. Despite setting the width to auto, as shown in the image below, the content in the ID column does not stay confined to a single line. Is there something I am overlooking? Below is my code snippet: CSS:
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
width: auto !important;
overflow: hidden;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
HTML table:
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Company Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
@foreach (Models.UTP utpResult in lstUtpResult.utp)
{
<tr>
<td>
<input value="1" id="type_radio_1" name="type_radio" type="radio" />
</td>
<td>@utpResult.id</td>
<td>@utpResult.companyName</td>
<td>@utpResult.address.street.Line1,
@utpResult.address.city,
@utpResult.address.zip.code,
@utpResult.address.country.name
</td>
</tr>
}
</tbody>
</table>
The content in the ID column is not fitting into a single line as desired.https://i.sstatic.net/7pZLZ.png