css, html - colspan not working the same on different tables [duplicate] - html

Question

This question already has answers here:
How is table layout fixed rendered?
(1 answer)
CSS table-layout: fixed not working?
(2 answers)
Closed 4 years ago.
I have two html tables that I would like to align the same (the columns should be of equal width for the both tables). Both tables have a title that should span two columns at the start, and both should have four columns total.
What happens is even though the width of the columns is defined, the resize according to the column content.
td,
th {
padding: .5rem;
}
.red-header {
font-weight: 700;
background-color: rgb(184, 167, 177);
text-align: start;
}
<table>
<thead>
<tr>
<th colspan="2" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
<th width='35%' />
<th width="15%" />
<th width="15%" />
</tr>
</thead>
<tbody>
<tr>
<td width="35%">something</td>
<td width="35%">something else</td>
<td width="15%">something</td>
<td width="15%">something else</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
<th width='35%' />
<th width="15%">something</th>
<th width="15%">something else</th>
</tr>
</thead>
<tbody />
</table>
How do I make the columns retain their size regardless of the content?

Answer 1

You set the colspan to 2 in the second table yet you have the second header still there but missing the closing tag. if you remove the second heading missing the tag it should fix your problem.
<table>
<thead>
<tr>
<th colspan="2" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
<th width='35%' />
<th width="15%" />
<th width="15%" />
</tr>
</thead>
<tbody>
<tr>
<td width="35%">something</td>
<td width="35%">something else</td>
<td width="15%">something</td>
<td width="15%">something else</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
<th width="15%">something</th>
<th width="15%">something else</th>
</tr>
</thead>
<tbody />
</table>
or close the tag
<table>
<thead>
<tr>
<th colspan="2" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
<th width='35%' />
<th width="15%" />
<th width="15%" />
</tr>
</thead>
<tbody>
<tr>
<td width="35%">something</td>
<td width="35%">something else</td>
<td width="15%">something</td>
<td width="15%">something else</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="2" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
<th width='35%' /></th>
<th width="15%">something</th>
<th width="15%">something else</th>
</tr>
</thead>
<tbody />
</table>

Answer 2

the one mistake i found your code is that you are missing closing for th tag in multiple places ..you can either use colspan or percentage of the width using both at same time dont make sense you can do this way using colspan
table{
width:100%
}
<table border='1'>
<thead>
<tr>
<th colspan="4" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
</tr>
</thead>
<tbody>
<tr>
<td >something</td>
<td >something else</td>
<td >something</td>
<td >something else</td>
</tr>
</tbody>
</table>
<table border="1">
<thead>
<tr>
<th colspan="4" width="35%" class="red-header">
THIS IS A LONG LONG HEADER STRING
</th>
</tr>
</thead>
<tbody>
<tr>
<td >something</td>
<td >something else</td>
<td >something</td>
<td >something else</td>
</tr>
</tbody>
</table>