Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

disable border collapse separate with rowspan

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

needed result

For now I have this result:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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 ?

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading