1

次のように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>
4

2 に答える 2

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>
于 2013-01-28T13:00:33.070 に答える
0

tds のデフォルトの間隔を削除するには、テーブルを折りたたむ必要がありますtable-collapse: collapse;。border-right: solid 1px;次に、テーブルの左側の最初の td ごとに a を追加します。

<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>
于 2013-01-28T13:17:15.310 に答える