how to adjust script function prinDIV and avoid printing on a table in a TD section

Question

how to adjust script function prinDIV and avoid printing on a table in a TD section

Navigation

#1 by (1 votes)

1

Dear,

This case where you put a script function printDiv to be able to print only the tables but does not work the cellpadding do not adjust. How do I do it?

1) I'm trying to adjust the cells of the tables that do not separate, but just lines.

2) another problem; I want to avoid a section "Modify" should not show for printing. only the selected tables. I already tried with hidden-print did not work does not work with TD. I do not want to waste time, I want to make short.

help me ... !! regards..

javascript css3 datatables

asked by Lisandro Contreras 29.09.2016 в 16:10

source

1 answer

Link several checkboxes with ng-model redirect when downloading pdf in FPDF output

score 1 · Accepted Answer

I'm trying to adjust the cells of the tables that do not separate, but fair lines.

For this you can use border-collapse: collpase in the styles of the table. If you want it with borders, you can use table th:not(:last-of-type) (the same for td ) to give it a right edge of 1px . You can also give the tr (provided it is not the last) a lower edge of 1px and to the table a general edge of 1px as well.

Example

table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  margin-top: 25px;
}
table thead th {
  background-color: #f2f2f2;
  font-weight: 500;
}
table thead th,
table tbody td {
  color: #333;
  font-family: 'segoe ui';
  font-size: 14px;
  padding: .5rem .65rem;
}
table thead th:not(:last-of-type),
table tbody td:not(:last-of-type) {
  border-right: 1px solid #ccc;
}
table thead tr,
table tbody tr:not(:last-of-type) {
  border-bottom: 1px solid #ccc;
}

<table style="display: inline-block">
    <thead>
      <tr>
        <th>#</th>
        <th>Código</th>
        <th>Producto</th>
        <th>Precio</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>1</td>
         <td>J495MF3</td>
         <td>Vitaminas</td>
         <td>24.78</td>
         <td>50</td>
      </tr>
      <tr>
         <td>2</td>
         <td>04KFM4Q</td>
         <td>Shampoo EGO</td>
         <td>20.35</td>
         <td>20</td>
      </tr>
    </tbody>
  </table>

I want to avoid that the "Modify" section should not show for printing.

I see that to print copies the contents of the table and write it in another tab. If you do this, then it is enough that, in the copied table, you add a style table th:last-of-type, table td:last-oftype whose value of display is none .

Example

let tableHTML = '<style>'+
                  // tus estilos
                  'table th:last-of-type,' +
                  'table td:last-oftype { '+
                  '  display: none;' +
                  '}' +
                  '</style>';
tableHTML += document.getElementById('table').outerHTML;
let newWin = window.open('');
newWin.document.write(tableHTML);
newWin.print();
newWin.close();

It is possible that you have the right edge of the double table, this is because when you delete the last column the previous column retains its right edge. If you want to delete it you just have to do (in the table to be printed):

table th:nth-child(penúltima),
table td:nth-child(penúltima) {
  border-right: 0px;
}