html - 如何在表格中使用行跨度和列跨度设置列的宽度？

Question

我制作了一个 html 页面来显示一些正在工作的系统的状态仪表板。前七行的系统是相互关联的，所以除了每个系统的状态之外，我想介绍七个系统组合的状态。从技术上讲，这很好用，但我对布局并不完全满意。我想让左边的黄色条占据第一列的一小部分，而不是一半。

表的前三行编码为：

<tr><th id="namehead"></th><th colspan="2" class="typehead">Data</th>
<th class="typehead">Strøm</th><th class="typehead">Komm.</th></tr>
<tr id="sys1"><td id="agg_data" class="data agg" rowspan="7" td><td id="sys1_data"
class="data sys1"></td><td id="sys1_power" class="power sys1"></td><td id="sys1_comm"
class="comm sys1"></td></tr>
<tr id="sys2"><td id="sys2_data" class="data"></td><td id="sys2_power" class="power"></td>
<td id="sys2_comm" class="comm"></td></tr>

然后从第 8 个状态行开始，我执行以下操作：

<tr id="arc"><td id="arc_data" class="data" colspan="2"></td>
<td id="arc_power" class="power"></td><td id="arc_comm" class="comm"></td></tr>

在我的 CSS 中，“typehead”类设置了 {width: 100px;}。我试图在第一个状态行的单元格上设置宽度，虽然它没有给我任何错误，但它也不起作用（firefox 和 chrome）是否有可能在 css 中实现这一点？

标签： htmlcsshtml-table

Answer 1

内容很可能正在拉伸表格单元格。如果将内容包装在 div 中并根据需要调整大小，则可以避免这种情况。并且，作为一个选项，垂直排列文本。

.typehead {
  width: 100px;
  font: bold 20px/1 sans-serif;
  color: #e3e3e3;
  background-color: #262626;
}

td {
  padding: 4px;
  text-align: right;
  background-color: #31a72c;
}

tr:nth-child(2) td:nth-child(1) {
  width: 1em;
  background-color: #ffee52;
}

.vertical {
  writing-mode: vertical-rl;
  transform: rotate(.5turn);
}

<table>
  <tr>
    <!--th id="namehead"></th-->
    <th colspan="2" class="typehead">Data</th>
    <th class="typehead">Strøm</th>
    <th class="typehead">Komm.</th>
  </tr>
  <tr id="sys1">
    <td id="agg_data" class="data agg" rowspan="7">
      <div class='vertical'>agg_data</div>
    </td>
    <td id="sys1_data" class="data sys1">sys1_data</td>
    <td id="sys1_power" class="power sys1">sys1_power</td>
    <td id="sys1_comm" class="comm sys1">sys1_comm</td>
  </tr>
  <tr id="sys2">
    <td id="sys2_data" class="data">sys2_data</td>
    <td id="sys2_power" class="power">sys2_power</td>
    <td id="sys2_comm" class="comm">sys2_comm</td>
  </tr>
  <tr id="sys3">
    <td id="sys3_data" class="data">sys3_data</td>
    <td id="sys3_power" class="power">sys3_power</td>
    <td id="sys3_comm" class="comm">sys3_comm</td>
  </tr>
  <tr id="sys4">
    <td id="sys4_data" class="data">sys4_data</td>
    <td id="sys4_power" class="power">sys4_power</td>
    <td id="sys4_comm" class="comm">sys4_comm</td>
  </tr>
  <tr id="sys5">
    <td id="sys5_data" class="data">sys5_data</td>
    <td id="sys5_power" class="power">sys5_power</td>
    <td id="sys5_comm" class="comm">sys5_comm</td>
  </tr>
  <tr id="sys6">
    <td id="sys6_data" class="data">sys6_data</td>
    <td id="sys6_power" class="power">sys6_power</td>
    <td id="sys6_comm" class="comm">sys6_comm</td>
  </tr>
  <tr id="sys7">
    <td id="sys7_data" class="data">sys7_data</td>
    <td id="sys7_power" class="power">sys7_power</td>
    <td id="sys7_comm" class="comm">sys7_comm</td>
  </tr>
  <tr id="arc">
    <td id="arc_data" class="data" colspan="2">arc_data</td>
    <td id="arc_power" class="power">arc_power</td>
    <td id="arc_comm" class="comm">arc_comm</td>
  </tr>
  <tr id="arc">
    <td id="arc_data" class="data" colspan="2">arc_data</td>
    <td id="arc_power" class="power">arc_power</td>
    <td id="arc_comm" class="comm">arc_comm</td>
  </tr>
  <tr id="arc">
    <td id="arc_data" class="data" colspan="2">arc_data</td>
    <td id="arc_power" class="power">arc_power</td>
    <td id="arc_comm" class="comm">arc_comm</td>
  </tr>
  <tr id="arc">
    <td id="arc_data" class="data" colspan="2">arc_data</td>
    <td id="arc_power" class="power">arc_power</td>
    <td id="arc_comm" class="comm">arc_comm</td>
  </tr>
  <tr id="arc">
    <td id="arc_data" class="data" colspan="2">arc_data</td>
    <td id="arc_power" class="power">arc_power</td>
    <td id="arc_comm" class="comm">arc_comm</td>
  </tr>
</table>