最大行長に基づいて複数の列に「単一列」表をラップします

Question

テーブルが特定の長さに達すると、列を2番目の列にラップします。私は3行の最大数を好きで、私は「として基本となるHTMLを変更することなく（それはそうのように複数の列にラップになるだろう

<table cellpadding="0" cellspacing="0" border="1" > 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 1:</strong> 
     </td> 
     <td width="200">Data 1</td> 
    </tr> 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 2:</strong> 
     </td> 
     <td width="200">Data 2</td> 
    </tr> 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 3:</strong> 
     </td> 
     <td width="200">Data 3</td> 
    </tr> 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 4:</strong> 
     </td> 
     <td width="200">Data 4</td> 
    </tr> 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 5:</strong> 
     </td> 
     <td width="200">Data 5</td> 
    </tr> 
</table> 

：たとえば、私は、フィールド名と値を持つこの「単一の列」のテーブルを持っています）ここでやった：

<table cellpadding="0" cellspacing="0" border="1" > 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 1:</strong> 
     </td> 
     <td width="200">Data 1</td> 
     <td width="150"> 
      <strong>Field 4:</strong> 
     </td> 
     <td width="200">Data 4</td> 
    </tr> 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 2:</strong> 
     </td> 
     <td width="200">Data 2</td> 
     <td width="150"> 
      <strong>Field 5:</strong> 
     </td> 
     <td width="200">Data 5</td> 
    </tr> 
    <tr height="50px"> 
     <td width="150"> 
      <strong>Field 3:</strong> 
     </td> 
     <td width="200">Data 3</td> 
    </tr> 
</table> 

私の好みは私のプロジェクトに限定されているJavascriptとJavascriptのライブラリを使用するために私の能力として、CSSを使用することです。

Answer 1

通常あなたがテーブルに流れるべきか以外のさまざまな方法でHTMLを操作するために探している場合は、テーブル要素を使用することはありませんが、あなたはHTMLを変更したくない与えられた、あなたはこのような何かを試みることができる：

tr { 
    width: 50%; 
    float: left; 
    height: auto; 
} 

this fiddleは、その外観を示しています。どのような種類のクラスか何かが必要であり、3行以上のときを特定し、CSSでそれを指定する必要があります。たとえば、.greater3rows tr、テーブルのクラスとしてgreater3rowsなどがあります。