在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

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

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