私は現在、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>
次のようにレンダリングされます。
Excelが表をレンダリングするように表をレンダリングしたいのですが、内側と外側の境界線があります。
table {
border-collapse:collapse;
}
セルパディングとセルスペーシングを追加して解決してください。編集:ダブルピクセルの境界線も削除されました。
<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>
これは手っ取り早い(正式には有効なHTML5ではありません)が、動作するようです-そして、質問通りinlineです:
<table border='1' style='border-collapse:collapse'>
<tr>
/<td>
タグをさらにスタイリングする必要はありません(基本的なテーブルグリッドの場合)。