2016-04-14 6 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

Может быть, вы могли бы использовать Bootstrap раздел таблицы (http://getbootstrap.com/components/#panels-tables). Взгляните на col-md-X (где X - число). Если вы не хотите использовать bootstrap, возможно, вы можете взглянуть на классы и взять то, что вы точно хотите. – Delphine

+0

Я не могу разместить div перед тэгом внутри тега таблицы. Это главная проблема. Visual Studio не позволяет. – 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 границ.

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

Что-то вроде этого

Смежные вопросы