css - 带有倾斜标题的 PDF 表格

Question

我正在使用 cfdocument 在 ColdFusion 中创建 PDF。我需要制作一个标题行倾斜的表格，以便它完全适合页面。这是我要完成的示例。 到目前为止，我发现的所有 HTML 或 CSS 示例都不起作用。现在我想知道这是否是特定于 ColdFusion 和/或 PDF 创建的怪癖。我知道这段代码直接来自对此处类似问题的回答，但它不会在我的 PDF 中创建带有倾斜列的表格。它创造了这个。

//CSS
* {
  box-sixing: border-box;
}

.outerDiv {
  background: grey;
  height: 200px;
  width: 100px;
  border: 1px solid black;
  border-bottom: 0;
  border-left: 0;
  transform: skew(-30deg) translateX(58%);
}

th:first-child .outerDiv {
  border-left: 1px solid black;
  position: relative;
}

.innerDiv {
  position: absolute;
  width: 250px;
  height: 85px;
  bottom: -34%;
  left: 10px;
  transform: skew(30deg) rotate(-60deg);
  transform-origin: 0 0;
  text-align: left;
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

.well {
    min-height: 20px;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    border: 1px solid black;
    border-radius: 3px;

}

.well_tight {
    padding: 3px;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    border: 1px solid black;
    border-radius: 3px;

}

//ColdFusion/HTML

<cfdocument format="pdf" name="#formname#" pagetype="letter" marginleft=".25" marginright=".25" margintop=".25" marginbottom=".5">

<cfoutput><style type="text/css">@import "/mach15/web/assets/css/formPDF.css";</style></cfoutput>


<div class="well">
     <table cellpadding="0" cellspacing="0">
          <tr>
                <th>
                  <div class="outerDiv">
                    <div class="innerDiv">This is first column header</div>
                  </div>
                </th>
                <th>
                  <div class="outerDiv">
                    <div class="innerDiv">This is second column header</div>
                  </div>
                </th>
                <th>
                  <div class="outerDiv">
                    <div class="innerDiv">This is third column header</div>
                  </div>
                </th>
          </tr>
          <tr>
                <td> 1 </td>
                <td> 2 </td>
                <td> 3 </td>
          </tr>
          <tr>
                <td> 4 </td>
                <td> 5 </td>
                <td> 6 </td>
          </tr>
          <tr>
                <td> 7 </td>
                <td> 8 </td>
                <td> 9 </td>
          </tr>
          <tr>
                <td> 10 </td>
                <td> 11 </td>
                <td> 12 </td>
          </tr>
    </table>
</div>

Answer 1

我使用 cfdoucment 设计 PDF 文档样式相当多，并且在使用 CSS 时遇到了很多麻烦。如此多的功能不受支持，这将使 PDF 的样式设置变得如此容易:CSS3 属性、CSS 伪元素，甚至 !important 都不支持。不幸的是可以使用标签。

然而，您可以使用足够多的技巧和变通方法(某种程度上)实现您想要的结果，它们通常需要稍微自定义您的标记，以下是我将如何解决您的问题:

首先:获取带有边框单元格/行的表格对于 CF PDF 的 CSS 来说并不是一项有趣的任务。不支持的 CSS 属性之一是 border-collapse: collapse;所以如果你使用表格，单元格之间会有空格等。对于标准表格，你最终会得到类似这样的东西:

所以我可能会使用 <div> 生成一个单独的标记只为您的 PDF 内容添加一个 pdf-only类或其他东西以仅显示在 PDF 上并隐藏在其他地方。

---

在您的问题中，由于 CSS 的限制，有 2 个问题无法解决。 1) 斜线 2) 垂直倾斜文本。

1) 斜线:

我能够通过将背景图像(见下文)附加到标题单元格并将它们与其他一些希望易于理解的 css 代码一起移动来创建倾斜 block :

.th {
    padding:10px 0;
    height: 200px;
    position: relative;
    left:50px;
    border-top: 1px solid #000;
    background:url(../img/line.gif) no-repeat right center;
}

这是带有 CSS 的完整标记:

<div class="table-wrapper pdf-only">
  <div class="row th-row">
    <div class="th th1">&nbsp;</div>
    <div class="th th2">&nbsp;</div>
    <div class="th th3">&nbsp;</div>
    <div class="th th4">&nbsp;</div>
  </div>
  <div class="row td-row first-td-row">
    <div class="td td1">Row 1</div>
    <div class="td td2"><span class="td-border"></span>r1c1</div>
    <div class="td td3"><span class="td-border"></span>r1c2</div>
    <div class="td td4"><span class="td-border"></span>r1c3<span class="td-last-border"></span></div>
  </div>
  <div class="row td-row">
    <div class="td td1">Row 2</div>
    <div class="td td2">r2c1</div>
    <div class="td td3">r2c2</div>
    <div class="td td4">r2c3</div>
  </div>
</div>

CSS:

.table-wrapper {
    width:75%; // so that the last column won't get cut off
    position: relative;
}

.row {
    width: 100%;
}

.td-row {
    border-bottom:1px solid #000;
    width: 100%;
    position: relative;
}

.td {
    padding:15px 0;
    text-indent: 10px;
    position: relative;
}

.th {
    padding:10px 0;
    height: 200px;
    position: relative;
    left:50px; // this should the same as the width of line.gif
    border-top: 1px solid #000;
    background:url(../img/line.gif) no-repeat right center;
}


/* Adjust the td, th widths below . You can even add different % to 
different cols as long as the total adds up to 100% per row. */

.td, .th {
    width: 25%; 
    float: left;
}

.th1 {
    border-top: 0;
}

span.td-border {
    height:1000px;
    width: 1px;
    position: absolute;
    border-left: 1px solid #000;
    left: 0;
    top:0;
}
span.td-last-border {
    height:1000px;
    width: 1px;
    position: absolute;
    border-left: 1px solid #000;
    right: -10px;
    top:0;
}

.first-td-row {
    border-bottom: 1px solid #000
}

以下是您将获得的内容:(这是使用 <cfdocument> 实际生成的 PDF)

这样就可以处理倾斜的标题

---

2) 垂直文本

我可以想到 2 种解决方案，但没有一种是理想的，但话又说回来，我们正在设计 CF PDF 的样式，因此我们必须发挥创意。

要准确获取您在问题中发布的内容(旋转文本)，我认为实现此目的的唯一方法是使用图像而不是文本。是的，我知道如果您的表格将是动态的并且标题文本不断变化，那将是特别作弊，这是行不通的。但是如果这个列表不会改变太多，你也可以使用图像，例如:

然后您可以在标题单元格中添加另一个元素，并将该图像设置为其背景并将其居中:

<div class="th th1">
  <div class="text"></div>
</div>

.th .text {
  width:100%;
  height:100%;
  position:absolute;
}

.th1 .text {
  background-image:url(../img/col1-text.gif) no-repeat center center;
}

如果将图像用作文本行不通，您可以循环遍历文本，并在每个字母后跟一个空格并每次以降序递增:

&nbsp;&nbsp;&nbsp;1<br/>
&nbsp;&nbsp;l<br/>
&nbsp;o<br/>
C<br/>

这显然不会旋转文本，但可以更轻松地适应页眉中的内容。

希望对您有所帮助。