html - HTML 中带有表 td 和 tr 的行分隔符

Question

我想像这样在 html 表格中放置行分隔符：如下所示的黑线 Z 形“镜像”，我尝试设置最后一个左侧td和第一个右侧td边框，但我无法想到我怎么能德拉姆垂直线

我试过这个： -

<table style="width: 100%">
            <tr>
                <td colspan="2" style="text-align: right">
                    <!--<img src=""/>-->
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center">
                    <label style="font-size: 26px; color: #1513CB">Register To Brand</label>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <div style="font-size: 20px; color: #1513CB">Welcome!</div>
                        <div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
                    </div>
                </td>
                <td style="border-bottom: 1px solid black"></td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>
                                <img src="Images/TabScore1.png" width="25" height="25" /></td>
                            <td>
                                <img src="Images/TabScore1.png" width="25" height="25" /></td>
                            <td></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <input type="text" /></td>
            </tr>
            <tr>
                <td >
                    <input type="text" /></td>
                <td>
                    <input type="text" /></td>
            </tr>
            <tr>
                <td >
                    <input type="text" /></td>
                <td>
                    <input type="text" /></td>
            </tr>
            <tr>
                <td style="border-bottom: 1px solid black";">
                    <input type="text" /></td>
                <td>
                    <input type="text" /></td>
            </tr>
        </table>

Answer 1

你在正确的轨道上。您只需为表格元素添加更多border-X样式和设置。border-collapse: collapse

另请注意，通常右侧单元格的边界将覆盖其左侧兄弟单元的边界。覆盖顶部“兄弟姐妹”边界的底部单元格也是如此（我知道，这里不是真正的兄弟姐妹，但你明白了......）。

<table style="width: 100%; border-collapse: collapse;">
        <tr>
            <td colspan="2" style="text-align: right">
                <!--<img src=""/>-->
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center">
                <label style="font-size: 26px; color: #1513CB">Register To Brand</label>
            </td>
        </tr>
        <tr>
            <td>
                <div>
                    <div style="font-size: 20px; color: #1513CB">Welcome!</div>
                    <div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>
                            <img src="Images/TabScore1.png" width="25" height="25" /></td>
                        <td>
                            <img src="Images/TabScore1.png" width="25" height="25" /></td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td  style="border-top: 1px solid black; border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
        <tr>
            <td >
                <input type="text" /></td>
            <td style="border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
        <tr>
            <td >
                <input type="text" /></td>
            <td style="border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
        <tr>
            <td style="border-bottom: 1px solid black";">
                <input type="text" /></td>
            <td style="border-left: 1px solid black;">
                <input type="text" /></td>
        </tr>
    </table>

Answer 2

您需要折叠表格以删除tds的默认间距，例如table-collapse: collapse;. 然后只需border-right: solid 1px;在表格左侧的每个第一个 td 上添加一个。

<html>
    <head></head>
    <body>
        <table style="width: 100%; border-collapse: collapse;">
            <tbody>
                <tr>
                    <td colspan="2" style="text-align: right;">
                        <!--<img src=""/>-->
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center">
                        <label style="font-size: 26px; color: #1513CB">Register To Brand</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <div style="font-size: 20px; color: #1513CB">Welcome!</div>
                            <div style="font-size: 18px; color: black">Dr John.G.Doe Phd</div>
                        </div>
                    </td>
                    <td style="border-bottom: 1px solid black"></td>
                </tr>
                <tr>
                    <td style="border-right: solid 1px;">
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <img src="Images/TabScore1.png" width="25" height="25" />
                                    </td>
                                    <td>
                                        <img src="Images/TabScore1.png" width="25" height="25" />
                                    </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="border-right: solid 1px;">
                        <input type="text" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="border-right: solid 1px;">
                        <input type="text" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <td style="border-bottom: 1px solid black;border-right: solid 1px;">
                        <input type="text" />
                    </td>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>