0

動的幅のキャプションがありますが、中央に配置したいのですが、正しく機能してtableいません。すべてのテーブルではなく、中央に配置してください。テーブルの中央に配置するにはどうすればよいですか。このhtmlの例を次に示します。inline-blockinlinetd

<table class="hours-table" style="width: 100%;" border="0"><caption>Title</caption>
<tbody>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
</tr>
</tbody>
</table>

よろしくお願いします！

4

1 に答える 1

1

中央で垂直方向と水平方向の両方に配置する場合は、次のCSSを使用できます。

table { position: relative; }
caption {
    ​position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em -10px; /* Change the -10px part depending on length of title */
}​

jsFiddle

水平方向にのみ配置する場合（テーブルの上部で、次を使用できます）。

caption { text-align: center; }

jsFiddle

編集：これは、中央に配置されたキャプションの背後に背景を許可するだけでなく、キャプションのテキスト部分の背後に白い背景を作成するソリューションです。

HTML

<caption>Title</caption>

CSS

div { background: url('background_image.jpg') repeat; }
caption {
    text-align: center;
    background: rgba(0,0,0,0);
}
span { background: white; }

JS

$(function() {
    var caption = $('caption');
    caption.html('<span>' + caption.html() + '</span>');
    });​

jsFiddle

于 2012-07-11T18:46:25.020 に答える