html - テーブルの行要素を中央揃えにする

Question

幅222pxのhtmlテーブルがあります

内部には、幅が 160px と定義された単一の行があります。

この行の内側には、行と同じ幅の列が 1 つあります。

私の質問は、この行をテーブルの中央に揃える方法です。

align="center" と style="float:center;" を試しました ただし、これらは含まれているテキストに対してのみ機能します。

Answer 1

しかし、どうしてもテーブルを使用する必要がある場合は、次のようにスタイルを設定します。

.resultset {
  width:222px; border:1px solid;
  border-collapse:separate; border-spacing:30px 2px;
}
.resultset td {
  border:1px solid;
}

border-spacing の 30px は、テーブル幅とセル幅の水平方向の差の半分です。

jsFiddleを参照してください。

Answer 2

これを使用する必要があります

<td align = 'center'>Blah blah</td>

これを使用するとうまくいきません

<tr align = 'center'></tr>

Answer 3

クエンティンに同意します。1x1 のテーブルを持つ意味はありません。

以下で試してみてください。

<div style="margin: 0px auto; position: relative; width: 222px;">
....your content
</div>

div の CSS クラスを作成することができます。個人的には、インライン スタイルは好きではありません。

Answer 4

あなたはそのようにこれを試すことができます

 <table width="222px" align="center">
 <td width="31px"></td>
 <td width="160px">test</td>
 <td width="31px"></td>
 </table>

ここでテスト: http://www.webmasterorbit.com/wysiwyg-html-tester.html