Печать таблиц выравнивания CSS

Question

Я пытаюсь настроить страницу Print.css так, что когда пользователь хочет распечатать выбранную страницу, она печатает в том формате, который я хочу.

Так на моей Index.cshtml странице У меня есть таблица, которая использует col-md-1col-md-offset-1, а затем моя вторая таблица с частичным видом, но с использованием col-md-3col-md-offset-3 и на веб-странице, они прекрасно отображающее так:

| Table 1 |  | Table 2 | 
| ------- |  | ------- | 
| ------- |  | ------- | 
| ------- |  | ------- | 

Но когда я просматриваю предварительный просмотр печати это выглядит следующим образом:

| Table 1 | 
| ------- | 
| ------- | 
| ------- | 

     | Table 2 | 
     | ------- | 
     | ------- | 
     | ------- | 

Теперь у меня есть частичный вид в <div></div> теге, и я на самом деле пытался дать что div (таблица 2) и фактическая таблица (таблица 1) a class, что повлияет только на Print.css, и я дал им свойство display:inline-table, но это не сработало. еще такой же результат

Вот мой HTML:

<link href="~/Content/Print.css" rel="stylesheet" media="print" /> 

<table class="table table-striped col-md-1 col-md-offset-1 print-col"> 
    <caption>Total Sports &amp; Colors</caption> 
    <tr> 
     <th> 
      @Html.DisplayName("Total Sports:") 
     </th> 

     <td> 
      @ViewBag.totalSports 
     </td> 

     <td> 
      <text class="percentages"> 
       @ViewBag.totalSportsPercentage 
      </text> 
     </td> 

    </tr> 

    <tr> 
     <th> 
      @Html.DisplayName("Total Colors:") 
     </th> 

     <td> 
      @ViewBag.totalColors 
     </td> 

     <td> 
      <text class="percentages"> 
       @ViewBag.totalColorsPercentage 
      </text> 
     </td> 
    </tr> 
</table> 

<div class="print-col"> 
    @Html.Action("Test", "TotalTest") 
</div> 

Вот мой print.css для имени print-col класса:

.print-col{ 
    display: inline-table; 
} 

Так что мой вопрос, как я могу получить мои таблицы, как на моей веб-странице для моего print.css?

Answer 1

Я был в состоянии получить то, что искал. Я дал первый стол class и дал ему свойства float: right;, а затем я дал вторую таблицу class и дал ей свойства float: left;, и в предварительном просмотре печати он отображался так, как я хотел.