How to remove the collapse in a table using css - html

Question

I'm trying to code a status cars for a character using Css and Html and I ant to remove those black collapse from the inside of the table so that it ill look like it's 40% Red and 60% Green.
Like the photo here:
enter image description here
I tried this:
.border table{
border-collapse: collapse;
width: 235px;
margin: 2px;
}
.border td{
padding:3px; /* the height */
border:2px solid black;
}
.percent20{
background-color:#ff000d;
}
.percent60{
background-color:rgba(18, 148, 18, 0.7);
}
But it didn't work and that's the further point I've reached:
enter image description here
The HTML code:
<div class="border">
<table>
<tr>
<td class="percent60"></td>
<td class="percent20"></td>
<td class="percent60"></td>
<td class="percent60"></td>
<td class="percent60"></td>
<tr>
</table>
</div>
I tried using just divs without using any tables but I cant make the percentages and all I got is small squares.

Answer 1

You can try using colspan for this particular scenario as it will combine multiple columns into one and you will be left with two columns which you can turn red or green as per your requirement.

Answer 2

table{
border-collapse: collapse; /* Remove cell spacing */
width: 235px;
margin: 2px;
}
table, th, td{
padding:3px; /* the height */
border:2px solid black;
}
table th, table td{
padding: 10px; /* Apply cell padding */
}
.percent20{
background-color:#ff000d;
}
.percent60{
background-color:rgba(18, 148, 18, 0.7);
}
<div class="border">
<table>
<tr>
<td class="percent60"></td>
<td class="percent20"></td>
<td class="percent60"></td>
<td class="percent60"></td>
<td class="percent60"></td>
<tr>
</table>
</div>

Answer 3

I solved the problem myself, Making the table with Html is just pain so I created it with only Divs.
The Css code:
/* Making table with only divs */
.divTable{
display: table;
width: 100%;
column-count: 5;
}
.divTableBody {
display: table-row-group;
}
.divTableRow {
display: table-row;
}
.class1, .class2{
border: 1px solid #000000;
display: table-cell;
padding: 3px 10px;
column-span: 2;
}
.class1 {
columns: 2;
background-color:#ff000d;
}
.class2 {
columns: 3;
background-color: rgba(18, 148, 18, 0.7);
}
The Html code:
<div class="border">
<div class="divTable" style="border: 1px solid #000;">
<div class="divTableBody">
<div class="divTableRow">
<div class="class1"></div>
<div class="class2"></div>
</div>
</div>
</div>
</div>