web-dev-qa-db-ja.com

レンダリングされたExcelテーブルのように見えるようにインラインスタイルでhtmlテーブルをフォーマットする方法は？

私は現在、htmlテーブルに境界線を設定するのにこだわっています。 （電子メールクライアントでのレンダリングを改善するためにインラインスタイルを使用しています）このコードは次のとおりです。

<html>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td width="350" style="border: 1px solid black ;">
                    Foo
                </td>
                <td width="80" style="border: 1px solid black ;">
                    Foo1
                </td>
                <td width="65" style="border: 1px solid black ;">
                    Foo2
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>

次のようにレンダリングされます。 alt text

Excelが表をレンダリングするように表をレンダリングしたいのですが、内側と外側の境界線があります。 alt text

htmlcssborderhtml-table
16
citronas
table {
  border-collapse:collapse;
}
29
Stephan Muller

セルパディングとセルスペーシングを追加して解決してください。編集：ダブルピクセルの境界線も削除されました。

<style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}
</style>
<html>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="350" >
                    Foo
                </td>
                <td width="80" >
                    Foo1
                </td>
                <td width="65" >
                    Foo2
                </td>
            </tr>
            <tr>
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
            <tr >
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>
9
Ralf de Kleine

これは手っ取り早い（正式には有効なHTML5ではありません）が、動作するようです-そして、質問通りinlineです：

<table border='1' style='border-collapse:collapse'>

<tr>/<td>タグをさらにスタイリングする必要はありません（基本的なテーブルグリッドの場合）。

5
nobar