Why i have diferent borders css tpl styling

[ptityop]

Hello,

I don't understand why I have different border styling, as you will see in screenshot I have plain css applied to the tables with just simple borders, but why are we seeing thicker lines than other ... I am putting some simple code i have here with the full css file ,as you will see I am using Table id and the top border looks thiner than the rest and seems there is some effect on the table. Any guidance will be appreciated. 

<!--  TAX DETAILS -->


 <table id="tax-tab" border="1" width="100%" >
               <tr>
                  <!-- / Ligne de bas de tableau commande -->          
                  <td>{l s='Forfait de livraison et manutention:' pdf='true'}<br />{if $order_invoice->total_shipping_tax_incl > 0}
                     {if $order_invoice->total_discount_tax_excl == $order_invoice->total_shipping_tax_incl  }{l s='Franco' pdf='true'} 
                     {else}
                     {if $order_invoice->total_discount_tax_excl == $order_invoice->total_shipping_tax_excl  }
                     {l s='Franco' pdf='true'} 
                     {else}
                     {displayPrice   price=$order_invoice->total_shipping_tax_excl}
                     {/if}
                     {/if}
                     {else}
                     {l s='Franco' pdf='true'} 
                     {/if}
                  </td> 
                  <td>
                     {l s='TVA Produits:' pdf='true'}<br />
                           {assign var=has_line value=false}
                           {foreach $tax_breakdowns as $label => $bd}
                           {assign var=label_printed value=false}
                           {foreach $bd as $line}
                           {if $line.rate == 0}
                           {continue}
                           {/if}
                           {assign var=has_line value=true}
                           <tr>
                              <td>
                                 {if isset($is_order_slip) && $is_order_slip}- {/if}
                                 {if $label == 'product_tax'}
                                 {displayPrice currency=$order->id_currency price=$line.total_amount}
                                 {/if}
                              </td>
                           </tr>
                           {/foreach}
                           {/foreach}

                  </td>
                  <td>{l s='TVA Livraison:' pdf='true'}{assign var=has_line value=false}<br />{foreach $tax_breakdowns as $label => $bd}{assign var=label_printed value=false}
                     {foreach $bd as $line}
                     {if $line.rate == 0}
                     {continue}
                     {/if}
                     {assign var=has_line value=true}
                     {if isset($is_order_slip) && $is_order_slip}- {/if}
                     {if $label == 'shipping_tax'}
                     {displayPrice currency=$order->id_currency price=$line.total_amount}
                     {/if}
                     {/foreach}
                     {/foreach}
                  </td>
                  <td  class="right">
                     {l s='Total:' pdf='true'}<br/>{displayPrice price=$order_invoice->total_paid_tax_incl}
                  </td>
               </tr>
            </table>
<!--  / TAX DETAILS -->

And that is the whole css 

 

{assign var=color_header value="#F0F0F0"}
{assign var=color_border value="#000000"}
{assign var=color_border_lighter value="#000000"}
{assign var=color_line_even value="#FFFFFF"}
{assign var=color_line_odd value="#FFFFFF"}
{assign var=font_size_text value="9pt"}
{assign var=font_size_header value="9pt"}
{assign var=font_size_product value="8pt"}
{assign var=height_header value="20px"}
{assign var=table_padding value="4px"}



<style>
div {
    padding: 0;
    margin:0;
    white-space:nowrap;
}
	table, th, td {
	   margin: 0!important;
		padding: 0!important;
		vertical-align: middle;
		font-size: {$font_size_text};
	   white-space: nowrap;
	}
	
	table.product {
		border: 1px solid {$color_border};
		border-collapse: collapse;
	}

	table#addresses-tab tr td {
		font-size: large;
	}

	table.summary-tab {
		padding: {$table_padding};
	    border: 1px solid {$color_border};
	    	
	}	

	table#summary-tab {
		padding: {$table_padding};
		border: 1pt solid {$color_border};
		padding-bottom: {$table_padding_bottom};
		border: 1pt solid black;

		
	}
	table.summary-tab .border-bottom1 {
	    border-bottom: 1px solid black;
	}
 
   table.summary-tab .border-right1 {
       border-right: 1px solid black;
   }



	table#summary-tab2 {
		padding: {$table_padding};
		border: 1pt solid {$color_border};
		padding-bottom: {$table_padding_bottom};

		
	}
    table#tax-tab {
		padding: {$table_padding};
		border: 1pt solid {$color_border};

	}
	table#total-tab {
		padding: {$table_padding};
		border: 1pt solid {$color_border};
	}
	table#tax-tab td{
	}
	table#note-tab {
		padding: {$table_padding};
		border: 1px solid {$color_border};
	}
	table#note-tab td.note{
		word-wrap: break-word;
	}
	
	table#payment-tab,
	table#shipping-tab {
		padding: {$table_padding};
		border: 1px solid {$color_border};
	}

	th.product {
		border-bottom: 1px solid {$color_border};
		background-color:white;
	}

	tr.discount th.header {
		border-top: 1px solid {$color_border};
			}

	tr.product td {
		border-bottom: 1px solid {$color_border_lighter};
	}

	tr.color_line_even {
		background-color: {$color_line_even};
	}

	tr.color_line_odd {
		background-color: {$color_line_odd};
	}

	tr.customization_data td {
	}

	td.product {
		vertical-align: middle;
		font-size: {$font_size_product};
	}

	th.header {
		font-size: {$font_size_header};
		height: {$height_header};
		background-color: {$color_header};
		vertical-align: middle;
		text-align: left;
		font-weight: bold;
	}

	th.header-right {
		font-size: {$font_size_header};
		height: {$height_header};
		background-color: {$color_header};
		vertical-align: middle;
		text-align: right;
		font-weight: bold;
	}

	th.payment,
	th.shipping {
		background-color: {$color_header};
		vertical-align: middle;
		font-weight: bold;
	}

	th.tva {
		background-color: {$color_header};
		vertical-align: middle;
		font-weight: bold;
	}

	tr.separator td {
		border-top: 1px solid #000000;
	}

	.left {
		text-align: left;
	}

	.fright {
		float: right;
	}

	.right {
		text-align: right;
	}

	.center {
		text-align: center;
	}

	.bold {
		font-weight: bold;
	}

	.border {
		border: 1px solid black;
	}

	.no_top_border {
		border-top:hidden;
		border-bottom:1px solid black;
		border-left:1px solid black;
		border-right:1px solid black;
	}


	.grey {
		background-color: {$color_header};

	}

	/* This is used for the border size */
	.white {
		background-color: #FFFFFF;
	}

	.big,
	tr.big td{
		font-size: 110%;
	}
	
	.small, table.small th, table.small td {
		font-size:small;
	}
	.padding {
	padding: 5px;
	}
	.margin-bottom10 {
	margin-bottom: 10px;
	}
	.border-bottom1 {
	border-bottom: solid black 1px;
	}

#qrcode {
	width: 20px;
	display: inline;
}
</style>

 

[ComGrafPL]

Url would be helpful.

[ptityop]

There is no url, it is on the pdf invoice ....