HTML rendering differs between reeding and live preview mode

[Bawasu]

Hi ! I made some css snippets for a table style i use in my obsidian page:

.confusion-matrix {
  width: 100%;
  margin: 1.5rem auto;
  border-collapse: separate;
  border-spacing: .4rem;
  }
  
.confusion-matrix th:not(:empty), td:first-child[rowspan="3"] {
  font-weight: bold;
  border: medium solid rgba(0, 0, 0, 0.4);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: .8rem;
  text-align: center;
  padding: 1.5rem;
  }
    
.confusion-matrix td{
  border-color: transparent;
  text-align: center;
  border-radius: 0.4rem;
  padding: .8rem;
}

.confusion-matrix th{
  border-color: transparent;
}
    
    
.confusion-matrix .true {
  background-color: rgb(50, 147, 53);
}

.confusion-matrix .false {
  background-color: rgb(156, 50, 50);
}

in source mode my page looks like this:

## Diagram
	
<div>
<table class=confusion-matrix>
<thead>
	  <caption style="font-size:30; font-weight:bold;margin:1.5rem;"> Confusion Matrix</caption>
	<tr>
		<th></th>
		<th colspan="3" class=cell>Predicted Class</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td rowspan="3" >Actual Class <br>(Ground Truth - GT)</td>
		<td></td>
		<td>Yes</td>
		<td>No</td>
	</tr>
	<tr>
		<td>Yes</td>
		<td class=true>True Positive</td>
		<td class=false>False Negative</td>
	</tr>
	<tr>
		<td>No</td>
		<td class=false>False Positive</td>
		<td class=true>True negative</td>
	</tr>
</tbody>
</table>
</div>

**False Negative**: It's a miss - Type II error
**False Positive**: It's a false alarm - Type I error

In live preview i get the following expected result:

And then in reading mode it’s different:

Borders don’t look the same. Also true and false class are not recognized everywhere. Margin and paddings are incorrect.

I don’t know what to do. Also when i export the pdf it doesn’t look according to what i want.

Thanks for your help and don’t hesitate to ask questions.