disable border collapse separate with rowspan

Question

I have a problem, here is the table that I am trying to implement in html:

needed result

For now I have this result:

actual result

with this code :

<style>
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }

    th,
    td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
</style>
    <table>
        <thead>
            <tr>
                <th>column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
                <th>column5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">Monday</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

            <tr>
                <td rowspan="2">Tuesday</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
    </table>

I need to find a way to remove the space between 2 lines inside a line that have a rowspan. Can someone help me ?

Answer 1

border-spacing is messing things up a bit, the simplest solution I can think of is:

1. set border-spacing: 0;
2. add empty row before each day of the week <tr class="break"></tr> that will act as a desired space/break
3. add styles for the break .break {height: 10px;}

full code:

<style>
    table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    th,
    td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    
    .break {
        height: 10px;
    }
</style>
<table>
    <thead>
        <tr>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
            <th>column4</th>
            <th>column5</th>
        </tr>
    </thead>
    <tbody>
        <tr class="break"></tr>
        <tr>
            <td rowspan="2">Monday</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="break"></tr>
        <tr>
            <td rowspan="2">Tuesday</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>