Html 禁用与行分开的边框折叠span

发布于02月23日

我有一个问题，以下是我正在try 用html实现的表:

目前，我有这样的结果:

使用此代码:

<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>

我需要找到一种方法来删除有行跨度的行内2行之间的空间. 有人能帮帮我吗？

推荐答案

border-spacing有点乱七八糟，我能想到的最简单的解决办法是:

套装border-spacing: 0;套
在一周中的每一天之前添加空行<tr class="break"></tr>，其将充当所需的空格/分隔符
为BREAK .break {height: 10px;}添加样式

完整代码:

<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>