我制作了一个包含两行的表，其中第一行有3列，第二行有2列(请参阅代码片段(。第一行中的中间列具有rowspan="2"。问题是它变得比设置的宽度小。
.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>我发现，将中间一列增加到150px会得到预期的结果，就像它是100px一样，但这不是一个选项，因为值将被动态键入。
发生这种情况的原因是什么，正确的解决方法是什么？
我们可以在这里使用css的表布局属性。
table{
table-layout:fixed;
}
表和列的宽度由表和列或乘以第一行单元格的宽度。其他行中的单元格没有影响列宽。如果第一行上没有宽度无论细胞内的内容。
所以您不需要为列设置任何宽度，它会根据表宽度自动计算；行中使用的列。
你可以在上找到更多https://www.w3schools.com/cssref/pr_tab_table-layout.asp