Remove all "Item Table" Borders with custom css?

#1

is there a print format template example where the table borders from the standard item table are removed?

i just want to make the invoice or quotatoin table look more straight, so just border-bottom lines should be visible 1 and the rest is 0.

my custom Css try was looking like this:

/* removes all table borders /
table, td, th {
border: 0 !important;
}
/ adds bottom border for just td rows */
td { border-bottom: 1px solid #eee !important; }

first it was looking promising on the web but when i printed it out the css was not working bec table borders are still visible. :thinking:

are there css style examples without borders or can anyone help here? :slight_smile:

#2

Hi @philip,

chances are that the CSS will not be sufficient here. Unfortunately, there are already several !importants used. I know this sounds awful, but try with inline formatting (<td style="border-bottom: 1px solid #eee !important;"> )…

#3

thanks @lasalesi for your answer.
ah, so i will try the inline formatting!

where can i copy the source code from my print format template, so i can change it?
the workflow is, copy and edit source print format, than paste it back in to
desk#Form/Print Format/my-custom-print-format

the checkbox custom format is checked
print format type is Server

54
54915×487 14.1 KB

#4

Hi @philip,

you’re welcome. Once you click “Custom format”, the drag-and-drop editor is hidden and instead, you have the html field. Populate this, save and you have your very own print formar (no need to copy/paste).

Now, the code of the drag-and-drop print format is not easily accessible (see also Print Format HTML - #3 by lasalesi). But you can take this as a start:

<!-- HEAD -->
<div  id="header-html" class="hidden-pdf" >
  <div class="print-heading">
	<h2>Sales Invoice<br><small>{{ doc.name }}</small></h2>
  </div>
</div>
<div id="footer-html" class="visible-pdf">
  <p class="text-center small page-number visible-pdf">Page <span class="page"></span> of <span class="topage"></span></p>
</div>

<!-- addresses -->
<table style="width: 100%; font-family: 'Open Sans', sans-serif;">
   <tr>
	<td style="width: 50%;"><!-- left --></td>
	<td style="width: 50%;"><!-- right --></td>
   </tr>
   <tr>
	<td><!-- left --></td>
	<td>{{ doc.customer_name }}<br />
		{{ doc.address_display }}</td>
   </tr>
</table>

<!-- order details -->
<p><br /></p>
<table style="width: 100%; font-family: 'Open Sans', sans-serif;">
   <tr>
	<td style="width: 20%;"><strong>{{ _("Sales Invoice") }}</strong></td>
	<td style="width: 30%;">{{ doc.name }}</td>
	<td style="width: 20%;"></td>
	<td style="width: 30%;"></td>
   </tr>
   <tr>
	<td>
	  {{ _("Sales Invoice Date") }}<br />
	  {{ _("Due") }}<br />
	</td>
	<td>
	  {{ doc.get_formatted('posting_date') }}<br />
	  {{ doc.get_formatted('due_date') }}
	</td>
	<td>
	  {{ _("Amount") }}<br />
	  IBAN
	</td>
	<td>
	  {{ doc.get_formatted('grand_total') }}<br />
	  CH12 4567 ...
	</td>
   </tr>
</table>

<p></p>
 <table  style="width: 100%; font-family: 'Open Sans', sans-serif;">
 <tr>
	<th style="width: 10%;">{{ _("Pos") }}</th>
	<th style="width: 30%;">{{ _("Description") }}</th>
	<th style="width: 20%;">{{ _("Rate") }}</th>
	<th style="width: 20%;">{{ _("Qty") }}</th>
	<th style="width: 20%;">{{ _("Amount") }}</th>
 </tr>
 {% for n in doc.items %}
 <tr>
	<td>{{ loop.index }}</td>
	<td>{{ _(n.item_name) }}</td>
	<td>{{ n.get_formatted('price_list_rate') }}</td>
	<td>{{ n.qty }} {{ _(n.stock_uom) }}</td>
	<td>{{ n.get_formatted('amount') }}</td>
 </tr>
 {% endfor %}
 </table>

<!-- summary and taxes -->
<p></p>
<table style="width: 100%; font-family: 'Open Sans', sans-serif;">
<tr>
	<td style="width: 60%;"></td>
	<td style="width: 20%;">
	  {{ _("Summe netto") }}<br />
	  {% for t in doc.taxes %}
		{{ _(t.description) }}<br />
	  {% endfor %}
	  {% if doc.discount_amount != 0 %}
		{{ _("Discount") }}<br />
	  {% endif %}
	  <strong>{{ _("Total") }}</strong>
	</td>
	<td style="width: 20%;">
	  {{ doc.get_formatted('total') }}<br />
	  {% for t in doc.taxes %}
		{{ t.get_formatted('tax_amount') }}<br />
	  {% endfor %}	  
	  {% if doc.discount_amount != 0 %}
		-{{ doc.get_formatted('discount_amount') }}<br />
	  {% endif %}
	  <strong>{{ doc.get_formatted('grand_total') }}</strong>
	 </td>
</tr>
</table>

This should get you started :wink:

1 Like