css - Tabla PDF con encabezado inclinado

html y css pdf

Question

Estoy creando archivos PDF en ColdFusion usando cfdocument. Necesito hacer una tabla con la fila del encabezado inclinada para que encaje en la página. Aquí hay un ejemplo de lo que estoy tratando de lograr. Ninguno de los ejemplos de HTML o CSS que he encontrado hasta ahora han funcionado. Ahora me pregunto si esto es una peculiaridad específica de la creación de ColdFusion y / o PDF. Sé que este código vino directamente de una respuesta a una pregunta similar aquí, pero no crea una tabla con columnas inclinadas en mi PDF. Crea esto.

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

¿Estás usando CF11 o superior? Si es así, utilice <cfhtmltopdf> con mucho mejor soporte css en lugar del legado <cfdocument> .

https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-gh/cfhtmltopdf.html

Answer 2

Trabajo en el diseño de documentos PDF usando cfdoucment bastante y he tenido muchos problemas con CSS. muchas funciones no son compatibles, lo que facilitaría mucho más el estilo de los PDF: desafortunadamente, las propiedades de CSS3, los pseudo-elementos CSS y ni siquiera la etiqueta !important

Sin embargo, hay suficientes trucos y soluciones que puede usar para alcanzar los resultados deseados, generalmente requieren personalizar un poco su marcado. Así es como resolvería su problema:

Primero: Obtener una tabla con celdas / filas limitadas no es una tarea divertida con CSS para CF PDF. Una de las Propiedades de CSS que no se admite es border-collapse: collapse; entonces si usa tablas habrá espacios entre celdas, etc. terminará con algo como esto para una tabla estándar:

Por lo tanto, probablemente generaría un marcado separado usando <div> solo para su contenido en PDF y agregaría una clase de pdf-only o algo para que se muestre solo en archivos PDF y se oculte en otro lugar.

En sus preguntas hay 2 problemas que no se pueden solucionar debido a la limitación de CSS. 1) líneas inclinadas 2) texto vertical inclinado.

1) Líneas inclinadas:

Pude crear los bloques inclinados adjuntando una imagen de fondo (ver más abajo) a las celdas del encabezado y desplazándolas junto con algún otro código CSS que, afortunadamente, es fácil de seguir:

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

Aquí está el marcado completo con el 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
}

Esto es lo que obtendrá: (este es un PDF generado usando <cfdocument> )

para que se ocupe de los encabezados inclinados

2) Texto vertical

Puedo pensar en 2 soluciones, ninguna de las cuales es ideal, pero nuevamente estamos diseñando archivos PDF de CF así que tendremos que ser creativos.

Para obtener exactamente lo que ha publicado en su pregunta (texto girado), creo que la única forma de lograrlo es utilizando imágenes en lugar de textos. Sí, sé que es una trampa, especialmente si tus mesas van a ser dinámicas, con los textos del encabezado cambiando constantemente esto no funcionará. Pero si esta lista no cambia demasiado, también podría usar imágenes, por ejemplo:

A continuación, agregaría otro elemento dentro de su celda de encabezado y establecería esa imagen como su fondo y posición central:

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

Si el uso de imágenes como textos no funciona, quizás pueda recorrer el texto y un salto de línea después de cada letra seguido de un espacio e incrementarlo cada vez de forma descendente:

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

Obviamente, eso no rota el texto, pero facilitará el ajuste del contenido en el encabezado.

Espero que ayude.