2016-04-14 15 views
0

CSSを使用して列を水平に配置する方法。CSS列の配置方法

する必要がありますどのように

enter image description here

<table> 
 
    <tbody> 
 
    <tr> 
 
    <td> 
 
     First element column 1 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     Second element column 1 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     First element column 2 
 
    </td> 
 
    <td> 
 
     First element column 3 
 
    </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     Second element column 2 
 
    </td> 
 
    <td> 
 
     Second element column 3 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

すべてのタグが生成物であるので、私はマークアップを変更することはできません。

@foreach(var computer in department.Computers) 
{ 
    <tr > 
     <td> 
       @computer.ID 
     </td> 
    </tr> 
} 

@foreach (var employee in department.Employees) 
{ 
    <tr> 
     <td> 
      @employee.Text 
     </td> 
     <td> 
      @employee.Number 
     </td> 
    </tr> 
} 
+0

ような何かたぶん、あなたはブートストラップセクションテーブル(http://getbootstrap.com/components/#panels-tables)を使用することができます。 col-md-X(Xは数字)を見てください。もしあなたがブートストラップを使いたくないのなら、クラスを見て、あなたが望むものを取ることができるかもしれません。 – Delphine

+0

テーブルタグの内側にtrを置くことはできません。それは主な問題です。ビジュアルスタジオでは許可されません。 – A191919

+1

何かわかりません - なぜマークアップを変更できないのですか?それは自動生成ですか? –

答えて

0

<table> 
 
     <tbody> 
 
       <tr> 
 
        <td> 
 
          First element column 1 
 
        </td> 
 
       
 
       <td> 
 
         First element column 2 
 
       </td> 
 
      
 
        <td> 
 
         First element column 3 
 
        </td> 
 
        
 
       </tr> 
 

 
      <tr> 
 
<td> 
 
         Second element column 1 
 
        </td> 
 
       <td> 
 
        Second element column 2 
 
       </td> 
 
       <td> 
 
        Second element column 3 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

0

最初</tr>を交換し、foreachの境界から2番目に置く必要があります。

<tr > 
@foreach(var computer in department.Computers) 
    { 

     <td> 
      @computer.ID 
     </td> 
     @foreach (var employee in department.Employees) 
     { 

         <td> 
          @employee.Text 
         </td> 
         <td> 
          @employee.Number 
         </td> 

      }       
    }    
    </tr> 

この