0

htmlテーブル内のすべての投稿を印刷するhtmlコードがあります。

ただし、投稿がない場合は、エラーを出力する必要がありますNo posts found。

エラーメッセージに注目してください

表の中央にエラーメッセージを印刷しようとしています。

<style>
table{border-collapse:collapse}
td{background-color:white;padding:10px}
.first_tr td{background-color:#f1f7f7 !important;border-bottom:1px red solid}
</style>
<table border="0" width="400px">
<tr class="first_tr"><td width="20%">POST ID</td><td width="79%">POST TITLE</td></tr>
<tr><td>No posts found</td></tr>
</table>

次に例を示します：http：//jsfiddle.net/9UhTd/

表の先頭にエラーメッセージが表示されていますが、中央に配置しようとしています。

4

3 に答える 3

3

まず、2番目の行の唯一のセルにcolspan属性がありません

<table border="0" width="400px">
<tr class="first_tr"><td width="20%">POST ID</td><td width="79%">POST TITLE</td></tr>
<tr><td colspan="2">No user found</td></tr>
</table>​​​​​

それがないと、そのセルはその上のセルのスペースのみを占有します。それが解決されたら、好きなように中央に配置することができます

<table border="0" width="400px">
<tr class="first_tr"><td width="20%">POST ID</td><td width="79%">POST TITLE</td></tr>
<tr><td colspan="2" style="text-align:center">No user found</td></tr>
</table>​​​​​

また

<style type="text/css">.center { text-align: center; }</style>
<table border="0" width="400px">
<tr class="first_tr"><td width="20%">POST ID</td><td width="79%">POST TITLE</td></tr>
<tr><td colspan="2" class="center">No user found</td></tr>
</table>​​​​​

これを実装したjsfiddle

于 2012-09-26T21:14:33.377 に答える
1

あなたはcolspanを逃していました

以下のコードは実行する必要があります

<style>
table{border-collapse:collapse}
td{background-color:white;padding:10px}
.first_tr td{background-color:#f1f7f7 !important;border-bottom:1px red solid}
</style>
<table border="0" width="400px">
<tr class="first_tr"><td width="20%">POST ID</td><td width="79%">POST TITLE</td></tr>
    <tr><td colspan="2">No user found</td></tr>
</table>​
于 2012-09-26T21:14:39.227 に答える
1

コメントはほとんどありません：1）colspan = "2"を使用してテーブルに2つの列があるため、要素が2列にまたがるように設定した場合

2）class = "error"のような要素にクラスを追加し、このスタイルをcssに追加できます。

.error{
    text-align:center;
}
于 2012-09-26T21:17:36.510 に答える