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>

我发现将中间列增加到150px可以得到预期的结果，因为它看起来是100px，但这不是一个选择，因为将动态键入值。

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

Answer 1

我们可以在此处使用css的表布局属性。

table{ table-layout:fixed; }

表格和列的宽度由表格和列的宽度或第一单元格的宽度。其他行中的单元格不影响列宽。如果第一行没有宽度，则列宽在表中平均分配，无论单元格中的内容。

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

您可以在https://www.w3schools.com/cssref/pr_tab_table-layout.asp

中找到更多信息

在表格列中增加行距会减小其宽度

1 个答案: