html - 增加表格列中的 rowspan 会减小其宽度

Question

我制作了一个包含两行的表格，其中第一行有 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>

我发现将中间列增加到 150 像素会得到预期的结果，它看起来像 100 像素，但这不是一个选项，因为值将被动态输入。

发生这种情况的原因是什么，正确的解决方法是什么？

Answer 1

我们可以在这里使用 css 的 table-layout 属性。

表{ 表格布局:固定； }

The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.

因此您无需为列设置任何宽度，它会根据行中使用的表格宽度和列自动计算。

您可以在 https://www.w3schools.com/cssref/pr_tab_table-layout.asp 上找到更多信息