Question posted in 
I have a table in which 1st column is spaning 8 rows while others are parallel to it. Second last row should be parallel to it while spaning 3 rows and 3 columns. Last row should be on a separate row it’s first column take 1 col while second takes 3 cols.
I want this enter image description here
This is my code
<table class="table discovery mb-0 ">
<thead>
<tr>
<th class="w-25">Discovery URL</th>
<th>Issue type</th>
<th>Plugin Id</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr class="discoveryurl">
<td class="text-start br-b0" rowspan="8">
opc.tcp://echo:53530/OPCUA/SimulationServer
</td>
<td class="text-start">
Anonymous authentication enabled
</td>
<td><a href="#" target="_blank">10001</a></td>
<td>
<div class="row">
<div class="col pe-0 text-start">High (7,3)</div>
<div class="col">
<div class="results high">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-start">Message Security Mode None</td>
<td><a href="#" target=" _blank ">10006</a></td>
<td>
<div class="row">
<div class="col pe-0 text-start">Medium (6,5)</div>
<div class="col">
<div class="results medium">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-start">Security Policy None</td>
<td><a href="#" target=" _blank ">10009</a></td>
<td>
<div class="row">
<div class="col pe-0 text-start">Medium (5,4)</div>
<div class="col">
<div class="results medium">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-start">Self-signed client application certificates trusted</td>
<td><a href="#" _blank ">10010</a></td>
<td>
<div class="row">
<div class="col pe-0 text-start">Medium (5,4)</div>
<div class="col">
<div class="results medium">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-start">Auditing disabled</td>
<td><a href="#" target=" _blank ">10002</a></td>
<td>
<div class="row">
<div class="col pe-0 text-start">Medium (5)</div>
<div class="col">
<div class="results medium">
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span class="active"></span>
<span></span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-start subs" colspan="3" rowspan="3">Hiding 3 random issues.
<a href="#">subscribe</a> to view all.
</td>
</tr>
<tr class="last-row">
<td class="text-start br-rb">
opc
</td>
<td class="text-start" colspan="3">
<ul class="error">
<li>
Https
</li>
</ul>
</td>
</tr>
</tbody>
</table>
and this is result
enter image description here
2
Answers
Your first
<td>has a rowspan of 8, however I only count 7<tr>s in your<tbody>.Bigger tables can be tricky with multiple col- and rowspan. You can draw the table on a paper and then number the cells you want to connect. Maybe that helps visualizing and determining the correct value for col- and rowspans.
Happy coding!
We need to be careful of a couple of things here
There aren’t as many rows in the table as is supposed by the first item spanning 8.
There is no concept of ‘normal’ height of a row – at least maybe to us who are used to wideish screens and see just one line of text per entry (but what would happen on a narrow viewport?). We need to tell the system what the height of a row is. In this set up ‘normal’ is whatever the content needs (plus perhaps a bit of padding.)
This snippet alters things so the cell previously designated to take up 3 rows takes up one but is made taller than the others with additional padding. And the cell that was to take up 8 rows now takes up just 6.
Things will adjust to narrower viewports/table.