1

この構造化データを含む html のテーブルがあります。

<table>
  <tr><td>label1</td><td>value1</td></tr>
  <tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr>
  ...
</table>

これは長いリストです。次のように、n番目の行の隣のn + 1番目の行ごとにできるようにしたいと思います。

<table>
  <tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
  ...
</table>

したがって、構造は同じままですが、CSS レイアウトは 2 行目ごとに右側に配置するため、ユーザーには 1 行に (フィールド、値) の 2 列が表示されます。

ヒントはありますか？

アップデート：

このトリックはそれを行いますが、テーブルレイアウトを破壊するため、使用できません.

TABLE TR
{
    float:left;
}
TABLE TR:nth-child(2n+1)
{
    float:left;
    clear:both;
}
4

1 に答える 1

4

試してみて、あなたが欲しいことを知らせてください。

あなたのHTML

<table>
  <tr><td>label1</td><td>value1</td></tr>
  <tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr>
  <tr><td>label4</td><td>value4</td></tr>
  <!-- more stuff here -->
</table>

CSS:

tr {
  float: left;
}

tr:nth-child(2n+1) {
  clear: left;
  padding-right: 10px; /* You can edit this line and add as per your style */
}

Chrome、Safari、Firefox で正常に動作します。IEでチェックされていません

例

于 2013-02-14T17:24:21.313 に答える