html - How do I set width of column with rowspan and colspan in table?

Question

I have made an html page to display a status dash board for some of the systems at work. The systems in the first seven rows are kind of interconnected, so in addition to the status for each of them, I want to present the status for the combination of the seven systems. Technically this works great, but I am not entirely happy with the layout. I would like to have the yellow bar at the left to take up a smaller part of the first colum, not half of it.

The first three rows of the table are coded as:

<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>

Then from the 8th status row, I do:

<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>

in my css, the class "typehead" has set {width: 100px;}. I have tried to set width on the cells of the first status row, although it does not give me any kind of errors, it does not work either (firefox and chrome) Is it somehow possible to achieve this in css?

question from:https://stackoverflow.com/questions/65884266/how-do-i-set-width-of-column-with-rowspan-and-colspan-in-table

Answer 1

Most likely the content is stretching the table cell. You can avoid this if you wrap the content in a div and size it as needed. And, as an option, arrange the text vertically.

.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>