-1

DIV クラスでラップされたフィールドの既存のテーブルがあります。

 1  2  3  4
 5  6  7  8

位置が一致する div クラスでラップされた 2 つの行と 4 つの列を持つテーブルを想像してください。次のように、現在のテーブルの下に 3、4、7、8 を移動する必要があります。

 1  2 
 5  6  
 3  4  7  8

これを実装する最良の方法は何ですか (CSS、Javascript など)?

編集：これは、すべての人が見るためのコードです...

<table>

  <tbody>
          <tr class="row-1 row-first">
                  <td class="col-1 col-first 1-classed">

  <div>        <span class="field-content"><a href="/test1">Test 1</a></span>  </div>  
  <div>        <span class="field-content"><img src="image1.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-2 2-classed">

  <div>        <span class="field-content"><a href="/test2">Test 2</a></span>  </div>  
  <div>        <span class="field-content"><img src="image2.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-3 3-classed">

  <div>        <span class="field-content"><a href="/test3">Test 3</a></span>  </div>  
  <div>        <span class="field-content"><img src="image3.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-4 col-last 4-classed">

  <div>        <span class="field-content"><a href="/test4">Test 4</a></span>  </div>  
  <div>        <span class="field-content"><img src="image4.jpg" width="50" height="50"></span>  </div>          </td>
              </tr>
          <tr class="row-2">
                  <td class="col-1 col-first 5-classed">

  <div>        <span class="field-content"><a href="/test5">Test 5</a></span>  </div>  
  <div>        <span class="field-content"><img src="image5.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-2 6-classed">

  <div>        <span class="field-content"><a href="/test6">Test 6</a></span>  </div>  
  <div>        <span class="field-content"><img src="image6.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-3 7-classed">

  <div>        <span class="field-content"><a href="/test7">Test 7</a></span>  </div>  
  <div>        <span class="field-content"><img src="image7.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-4 col-last 8-classed">

  <div>        <span class="field-content"><a href="/test8">Test 8</a></span>  </div>  
  <div>        <span class="field-content"><img src="image8.jpg" width="50" height="50"></span>  </div>          </td>
              </tr>
          <tr class="row-3 row-last">
                  <td class="col-1 col-first 9-classed">

  <div>        <span class="field-content"><a href="/test9">Test 9</a></span>  </div>  
  <div>        <span class="field-content"><img src="image9.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-2 10-classed">

  <div>        <span class="field-content"><a href="/test10">Test 10</a></span>  </div>  
  <div>        <span class="field-content"><img src="image10.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-3 11-classed">

  <div>        <span class="field-content"><a href="/test11">Test 11</a></span>  </div>  
  <div>        <span class="field-content"><img src="image11.jpg" width="50" height="50"></span>  </div>          </td>
                  <td class="col-4 col-last 12-classed">

  <div>        <span class="field-content"><a href="/test12">Test 12</a></span>  </div>  
  <div>        <span class="field-content"><img src="image12.jpg" width="50" height="50"></span>  </div>          </td>
              </tr>
      </tbody>
</table>
4

1 に答える 1

0

だから...私はこれを達成するためにテーブルを使用することになりました。私は DIV コーディングに行き詰まり、いくつかのフォーラムを読んだ後、モーニングコールを受けました。これは表形式のデータであり、表で表す必要があります。

<table width="100%" style="border:1px solid red">
<tr><td>
    <h3>Title</h3>
</td>
</tr>

<tr>
 <td align=center>1</td>
 <td align=center>2</td>
 <td align=center>3</td>
 <td rowspan=2 align=center>4</td>
</tr>

<tr>
 <td align=center>5</td>
 <td align=center>6</td>
 <td align=center>7</td>
</tr>

<tr>
 <td align=center>8</td>
 <td align=center>9</td>
 <td align=center>10</td>
 <td align=center>11</td>
</tr>

</table>
于 2013-04-24T21:21:45.987 に答える