打印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对齐表

回答

相关问题