0

次の表があります。

html:

<table>
    <tr>
        <td>water<br /><br /></td>
        <td>oil</td>
        <td>fire</td>
    </tr>
        <tr>
        <td>spec1<br /><br /></td>
        <td>spec2</td>
        <td>spec3</td>
    </tr>
</table>

CSS:

table th, td {
    background-color: #ccc;
    border: 1px solid #999;
    padding: 5px;
    vertical-align: top;
    width:10px;
}

テーブルが次のようになるようにするにはどうすればよいですか: (CSS または jQuery を使用して操作することしかできません)

water   spec1 
oil     spec2 
fire    spec3

http://jsfiddle.net/HAQ3s/30/

4

2 に答える 2

0

このフィドルアップデートを試してください。FFで正しくテストします。他のブラウザを試したことがありません。

以下のblockステートメントとinline-blockステートメントを元のスタイルに追加しました。

CSS：

table th, td {
    background-color: #ccc;
    border: 1px solid #999;
    padding: 5px;
    vertical-align: top;
    width:10px;
    display:block;
}
table tr
{
    display:inline-block;
    margin:-2px;
}

スタイル定義で負の余白を使用して、table tr好みに合わせて間隔を調整できます。

于 2012-05-25T15:23:11.180 に答える
0

これを追加 ：

td {
 display: block;   
}

そして、各 td に id を与えた後:

​#t1:before {
    content:"water";
}​​​​​

その後、負のマージンを持つ br を「削除」できます。

#t2 {
   margin-top:-15px;   
}

最後のトリックは、さまざまな長さのラベルを補うためにスペースを追加することです。コンテンツでユニコード \00A0 を使用します。

#t2:before {
    content:"oil \00A0\00A0\00A0\00A0\00A0";
}

http://jsfiddle.net/dystroy/BNLgH/

編集：htmlを生成できる場合は、次のようにします：

<table>
<tr><td align=right>water</td><td>0</td></tr>
...
</table>
于 2012-05-25T15:12:58.207 に答える