line separator mit table, td und tr im HTML

ich möchte die Zeile Trennzeichen in html-Tabelle wie diese : ein Schwarz line Z-Form, "Spiegel-Bild", wie Sie unten sehen , habe ich versucht, die letzten linken Seite td und erst Recht Seite td Grenze, aber ich bin nicht in der Lage zu denken, wie konnte ich das dram vertikale Linie

line separator mit table, td und tr im HTML

habe ich versucht, dieses:-

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

InformationsquelleAutor ALAN | 2013-01-28

  1. 1

    Sind Sie auf dem richtigen Weg. Sie müssen nur fügen Sie einige mehr border-X Stile andset border-collapse: collapse für das table-element.

    Beachten Sie auch, dass im Allgemeinen die Grenze des richtigen Zellen überschrieben werden, die die Grenze Ihrer linken Geschwister. Dasselbe gilt für die unteren Zellen überschreiben der Grenze von oben "Geschwister" (nicht wirklich Geschwister hier, ich weiß, aber Sie erhalten das Bild ...).

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

    InformationsquelleAutor Sirko

  2. 0

    Müssen Sie zum ausblenden der Tabelle zu entfernen die Standard-Abstand von tds, z.B. table-collapse: collapse;. Dann fügen Sie einfach ein border-right: solid 1px; an jedem ersten td auf der linken Seite der Tabelle.

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

    InformationsquelleAutor

Schreibe einen Kommentar