打印CSS對齊表

我正在嘗試配置我的Print.css頁，以便當用戶想要打印選定頁面時，它會以我想要的格式打印。打印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-col類名Print.CSS：

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

所以我的問題是，如何讓我的表，像我的網頁對齊我的print.css？

來源

2016-03-08 GTown-Coder

我很確定打印文檔的「視口」小於引導程序中「col-md- *」的視口。 – Quantastical

我能夠得到我在找的東西。我給了第一張桌子class，並給了它的屬性，然後我給了第二張桌子class，並給它的屬性float: left;，並在它的打印預覽顯示我想要的方式。

來源

2016-03-08 15:09:24

打印CSS對齊表

回答

相關問題