es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué se superponen los colores de las celdas de la tabla en mi tabla CSS?

11 Jun, 2023 Programación

Estoy usando CSS en un archivo .RMD para R y estoy generando un archivo HTML que produce tablas.

Luego convierto el archivo HTML a PDF.

La siguiente imagen muestra el problema que enfrento, los colores de las celdas se superponen:

La siguiente es la parte del código intermedio de la fuente de la página HTML:

<html>

<p><head></p>

<p><meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" /></p>

<p><title>Titulo del archivo</title></p>

<p><style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>
<script type="text/javascript">
if (window.hljs) {
  hljs.configure({languages: []});
  hljs.initHighlightingOnLoad();
  if (document.readyState && document.readyState === "complete") {
    window.setTimeout(function() { hljs.initHighlighting(); }, 0);
  }
}
</script></p>

<p><style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style></p>

<p><style type="text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
}
.tabbed-pane {
  padding-top: 12px;
}
.html-widget {
  margin-bottom: 20px;
}
button.code-folding-btn:focus {
  outline: none;
}
summary {
  display: list-item;
}
</style></p>

<p><!-- tabsets --></p>

<p><style type="text/css">
.tabset-dropdown > .nav-tabs {
  display: inline-table;
  max-height: 500px;
  min-height: 44px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
}</p>

<p>.tabset-dropdown > .nav-tabs > li.active:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}</p>

<p>.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
  content: "";
  border: none;
}</p>

<p>.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}</p>

<p>.tabset-dropdown > .nav-tabs > li.active {
  display: block;
}</p>

<p>.tabset-dropdown > .nav-tabs > li > a,
.tabset-dropdown > .nav-tabs > li > a:focus,
.tabset-dropdown > .nav-tabs > li > a:hover {
  border: none;
  display: inline-block;
  border-radius: 4px;
  background-color: transparent;
}</p>

<p>.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
  display: block;
  float: none;
}</p>

<p>.tabset-dropdown > .nav-tabs > li {
  display: none;
}
</style></p>

<p><!-- code folding --></p>

<p></head></p>

<p><body></p>

<p><div class="container-fluid main-container"></p>

<p><div class="fluid-row" id="header"></p>

<p><h1 class="title toc-ignore">Titulo del archivo</h1>
<h3 class="subtitle"><div style="white-space: pre-line;"><strong>Salida de prueba</strong></p>

<p>2019/20</div></h3></p>

<p></div></p>

<p><style type="text/css"></p>

<p>@media screen {
body{ /* Normal  <em>/
      font-size: 15px;
      font-family: "Arial", Helvetica, sans-serif;
  }
table, td {  /</em> Tabla  <em>/
  font-size: 13px;
  font-family: "Arial", Helvetica, sans-serif;
  table-layout: fixed;
  width: 100%;
}
h1.title {
  font-size: 38px;
  color: #0070c0;
  top: 25px;
  font-family: "Arial", Helvetica, sans-serif;
}
h1 { /</em> Encabezado 1 <em>/
  font-size: 28px;
  color: #558ee7;
  font-family: "Arial", Helvetica, sans-serif;
}
h2 { /</em> Encabezado 2 <em>/
  font-size: 22px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
h3 { /</em> Encabezado 3 <em>/
  font-size: 18px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
h4 { /</em> Declaración de calidad <em>/
  font-size: 28px;
  color: #558ee7;
  font-family: "Arial", Helvetica, sans-serif;
}
h5 { /</em> subtítulo */
  font-size: 13px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
.main-container {
  max-width: 100% !important;
}
}
@media print {
body{
  -webkit-print-color-adjust: exact;
}
}</p>

<p><script></p>

<p>// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});</p>

<p></script></p>

<p><!-- tabsets --></p>

<p><script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});</p>

<p>$(document).ready(function () {
  $('.tabset-dropdown > .nav-tabs > li').click(function () {
    $(this).parent().toggleClass('nav-tabs-open')
  });
});
</script></p>

<p><!-- code folding --></p>

<p><!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script></p>

<p></body>
</html>

No estoy seguro de qué parte del código debería modificar para evitar que esto ocurra. Además, sería genial si la salida también pudiera estar en horizontal.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con la superposición de colores de celda probablemente se deba a que el CSS de la tabla no se ajusta para imprimir en PDF. Una solución sería agregar una consulta de medios específicamente para los estilos de impresión y ajustar las reglas CSS para la tabla en consecuencia. Por ejemplo:

    @media print {
  table {
    border-collapse: collapse;
  }
  td, th {
    border: 1px solid #ccc;
    padding: 0.5em;
    background-color: transparent;
  }
}

    Esto colapsará los bordes de la tabla al imprimir y eliminará el color de fondo para las celdas de la tabla.

    Para cambiar la salida a horizontal, puede agregar un tamaño de página y orientación al encabezado YAML del archivo RMD. Por ejemplo:

    ---
title: "Título del archivo"
output:
  pdf_document:
    orientation: landscape
    keep_tex: true
    pandoc_args: [
      "-V", "geometry:margin=1in", 
      "-V", "fontsize=12pt",
      "-V", "colorlinks=true",
      "-V", "linkcolor=blue",
      "-V", "filecolor=blue",
      "-V", "urlcolor=blue"
    ]
---

    Esto establecerá la orientación del PDF en horizontal y ajustará el margen y el tamaño de fuente. El argumento keep_tex: true también mantendrá el archivo LaTeX intermedio generado durante la conversión a PDF, lo que puede ser útil para solucionar problemas con la salida de PDF.

Comments are closed.