I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width.
.kolona {
background: white;
height: auto !important;
}
td { width: 100%; }
#langas td { border: 1px solid black; }
#langas { border: 1px solid black; }
#langas td td { /* empty */ }
.lightblue { background-color: lightblue; }
table { border-collapse: collapse; }
td { width: auto; }
table table {
height: 100%;
border: 0;
width: 100%;
}
#langas tbody { border-spacing: 2px; }
tbody {
width: 100%;
display: inline-table;
border-collapse: initial;
}
.bb { height: 30px; }
.img-bg {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
/* background: no-repeat url( data url ); */
z-index: 555;
}
.window-col {
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
tr { /* empty */ }
.kampuciai .kampuciai-bf:before {
background: #000;
content: "";
width: 2px;
height: 11px;
position: absolute;
bottom: -2px;
left: 3px;
margin-top: 1px;
transform: rotateZ(45deg);
width: 1px;
}
.kampuciai .kampuciai-bf:after {
background: #000;
content: "";
width: 2px;
height: 11px;
position: absolute;
bottom: -2px;
right: 3px;
margin-top: 1px;
transform: rotateZ(-45deg);
width: 1px;
}
.kampuciai {
padding: 5px;
}
.kampuciai:before {
background: #000;
content: "";
width: 2px;
height: 11px;
position: absolute;
top: -3px;
left: 3px;
margin-top: 1px;
transform: rotateZ(-45deg);
width: 1px;
}
.kampuciai:after {
background: #000;
content: "";
width: 2px;
height: 11px;
position: absolute;
top: -3px;
right: 3px;
margin-top: 1px;
transform: rotateZ(45deg);
width: 1px;
}
#langas tbody tbody td {
height: 100%;
position: relative;
}
.top-units {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
* { /* empty */ }
.frame-units .units {
background-color: #ededed;
max-width: 60px;
margin: 0 auto;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
display: block;
color: #000;
}
.top-units .units { text-align: center; }
.top-units td {
border-left: 1px solid #000;
border-top: 1px solid black;
height: 30px;
}
.top-units td:first-child { border: none; }
.frame-units .unit-block {
position: relative;
width: 100%;
}
.main-unit-block-width .units, .main-unit-block-height .units {
width: 70px;
max-width: 70px;
margin-bottom: 10px;
}
.top-units .units { text-align: center; }
.frame-units .units {
background-color: #ededed;
max-width: 60px;
margin: 0 auto;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
display: block;
color: #000;
}
#t_width, #r_height { width: 39px; }
.frame-units .u-bubble {
background: #fff;
font-size: 15px;
width: 30px;
color: #000;
border: none;
border-radius: 5px;
padding: 2px 2px;
text-align: right;
}
.frame-units .units .unit { margin-left: 4px; }
.upper-measures, .upper-measures tbody, .upper-measures tbody tbody {
border-collapse: collapse!important;
}
#langas tbody tbody { height: 100%; }
.right-units {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
/* .right-units td { background: url( absolute url ) repeat-y 15px top; } */
.right-units table tr:last-child td { border: none; }
.right-units table td { border-bottom: 1px solid black; }
.right-units .unit-block { /* empty */ }
.right-units .units {
position: relative;
top: 15px;
margin-left: 10px;
}
.varstymas {
width: 100%;
height: 100%;
}
.bb td { border:1px solid black; }
.bb { height: 100%; }
.paskutinis-borderis { padding: 5px; }
.duru-img { width: 100%; }
.kolonos-plotis:disabled { background: #ededed; }
.kolonos-aukstis:disabled { background: #ededed; }
.inputErr { border: 1px solid red; }
.st0 { fill:#AFB2B4; }<table id="langas" style="height: 302px; width: 302px;">
<tbody style="height: 300px; width: 300px;">
<tr id="window-row-0" class="window-row">
<td rowspan="1" colspan="1" class="window-col" style="padding: 0px;height:150px;line-height:0px;width:100px;" id="window-col-0-0">
<div id="img-bg-0" class="img-bg"></div>
</td>
<td rowspan="2" colspan="1" class="window-col" style="padding: 0px;height:150px;line-height:0px;width: 100px;" id="window-col-0-1">
<div id="img-bg-1" class="img-bg"></div>
</td>
<td rowspan="1" colspan="1" class="window-col" style="padding: 0px;height:150px;line-height:0px;width:100px;" id="window-col-0-2">
<div id="img-bg-2" class="img-bg"></div>
</td>
</tr>
<tr id="window-row-1" class="window-row">
<td rowspan="1" colspan="1" class="window-col" style="padding: 0px;height:150px;line-height:0px;width:150px;" id="window-col-1-0">
<div id="img-bg-0" class="img-bg"></div>
</td>
<td rowspan="1" colspan="1" class="window-col" style="padding: 0px;height:150px;line-height:0px;width:150px;" id="window-col-1-1">
<div id="img-bg-1" class="img-bg"></div>
</td>
</tr>
</tbody>
</table>I have noticed that increasing the middle column width to 150px resolves the visual discrepancy, but this workaround is not sustainable as the values will be dynamically inputted. What could be causing this issue, and what would be the appropriate approach to resolve it?