I have attempted to inquire about this question before but did not receive any helpful responses, so I am trying again in the hopes that someone can assist me.
My desired outcome is as follows:
- The table should stretch to 100%
- The first input element should "fill" the table since it needs to be at 100%
- The other input elements should be of different sizes
- The td elements should match the width of the input elements with no space in between
- This should be achieved by only making changes to the CSS (no JavaScript or HTML modifications)
In the code snippet provided below, you can view my HTML table. I do not wish to alter the structure in any way, and adding classes or using JavaScript is not an option for me.
When you run the code snippet, you will notice the issue I am facing – the td elements are wider than the input element. My goal is for the second, third, and fourth tds to adjust their widths to match those of the input elements while allowing the first td to expand (as the table must be at 100%).
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
.small {
width: 20px;
}
.medium {
width: 40px;
}<table>
<tbody>
<td>
<div>
<input type="text" />
</div>
</td>
<td>
<div>
<input class="small" type="text" />
</div>
</td>
<td>
<div>
<input class="medium" type="text" />
</div>
</td>
<td>
<div>
<input class="medium" type="text" />
</div>
</td>
</tbody>
</table>I am aware that setting the width on the td elements instead of the input could solve this problem, but that is not the solution I am seeking. I also understand that adjusting the table width to auto could work, but that is not the approach I want to take. My objective is to make the td elements match the width of the input elements using only CSS.