2016-04-14 13 views
0

So platzieren Sie die Spalten horizontal mit css.CSS zum Platzieren der Spalte

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>

ich Markup nicht ändern kann, da alle Tags das Produkt ist:

Wie sollte

@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

Vielleicht könnten Sie Bootstrap Abschnitt Tabelle (http://getbootstrap.com/components/#panels-tables) verwenden. Sehen Sie sich col-md-X an (wobei X eine Zahl ist). Wenn Sie keinen Bootstrap verwenden wollen, können Sie sich vielleicht einen Blick auf die Klassen werfen und genau das machen, was Sie wollen. – Delphine

+0

Ich kann nicht div vor tr innerhalb Tabelle Tag platzieren. Es ist das Hauptproblem. Visual Studio lässt dies nicht zu. – A191919

+1

Etwas, das ich nicht verstehe - warum Sie Markup nur nicht ändern können? Wird es automatisch generiert? –

Antwort

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

sollten Sie zuerst </tr> ersetzen und die zweite von foreach Grenzen setzen.

<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> 

So etwas wie dieses

Verwandte Themen