I have created two tables with bootstrap 4, which show on the one hand specifications and on the other hand earning statistics.
I put both tables in a col-xs-6-class and want one table aligned to the left and the other table to the right. However, currently the tables are somehow clued to each other. Please find below my minimum viable example:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-6">
<h2>Specifications</h2>
<table class="table stats">
<tbody>
<tr>
<th>Price :</th>
<td class=" text-right">
100 </td>
</tr>
<tr>
<th>Manufacturer:</th>
<td class=" text-right">
Gigabyte </td>
</tr>
<tr>
<th>Wattage:</th>
<td class=" text-right">
150 </td>
</tr>
<tr>
<th>Product:</th>
<td class=" text-right">
Product 1 </td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6">
<h2>Earning</h2>
<table class="table stats">
<tbody>
</tbody>
<thead>
<tr>
<th>Period</th>
<th class="text-right">Rev</th>
<th class="text-right">Cost</th>
<th class="text-right">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hour</td>
<td class="text-right text-info">$
<span id="rev-hour">
0.022 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-hour">
0.006 </span>
</td>
<td class="text-right text-success">$
<span id="earning-hour">
0.016 </span>
</td>
</tr>
<tr>
<td>Day</td>
<td class="text-right text-info">$
<span id="rev-day">
1.34 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-day">
0.36 </span>
</td>
<td class="text-right text-success">$
<span id="earning-day">
0.98 </span>
</td>
</tr>
<tr>
<td>Week</td>
<td class="text-right text-info">$
<span id="rev-week">
9.37 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-week">
2.52 </span>
</td>
<td class="text-right text-success">$
<span id="earning-week">
6.85 </span>
</td>
</tr>
<tr>
<td>Month</td>
<td class="text-right text-info">$
<span id="rev-month">
37.48 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-month">
10.08 </span>
</td>
<td class="text-right text-success">$
<span id="earning-month">
27.40 </span>
</td>
</tr>
<tr>
<td>Year</td>
<td class="text-right text-info">$
<span id="rev-year">
449.77 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-year">
120.96 </span>
</td>
<td class="text-right text-success">$
<span id="earning-year">
328.81 </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Any suggestions how to align the Specification table to the left and the Earnings table to the right?
I appreciate your replies!
Add the container-fluid class div around the row.
There is no such class as col-xs-6 instead use col-6
Added another div in col-6 and add padding to it for making some space between them.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="pr-1">
<h2>Specifications</h2>
<table class="table stats">
<tbody>
<tr>
<th>Price :</th>
<td class=" text-right">
100 </td>
</tr>
<tr>
<th>Manufacturer:</th>
<td class=" text-right">
Gigabyte </td>
</tr>
<tr>
<th>Wattage:</th>
<td class=" text-right">
150 </td>
</tr>
<tr>
<th>Product:</th>
<td class=" text-right">
Product 1 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-6">
<div class="pr-1">
<h2>Earning</h2>
<table class="table stats">
<tbody>
</tbody>
<thead>
<tr>
<th>Period</th>
<th class="text-right">Rev</th>
<th class="text-right">Cost</th>
<th class="text-right">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hour</td>
<td class="text-right text-info">$
<span id="rev-hour">
0.022 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-hour">
0.006 </span>
</td>
<td class="text-right text-success">$
<span id="earning-hour">
0.016 </span>
</td>
</tr>
<tr>
<td>Day</td>
<td class="text-right text-info">$
<span id="rev-day">
1.34 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-day">
0.36 </span>
</td>
<td class="text-right text-success">$
<span id="earning-day">
0.98 </span>
</td>
</tr>
<tr>
<td>Week</td>
<td class="text-right text-info">$
<span id="rev-week">
9.37 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-week">
2.52 </span>
</td>
<td class="text-right text-success">$
<span id="earning-week">
6.85 </span>
</td>
</tr>
<tr>
<td>Month</td>
<td class="text-right text-info">$
<span id="rev-month">
37.48 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-month">
10.08 </span>
</td>
<td class="text-right text-success">$
<span id="earning-month">
27.40 </span>
</td>
</tr>
<tr>
<td>Year</td>
<td class="text-right text-info">$
<span id="rev-year">
449.77 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-year">
120.96 </span>
</td>
<td class="text-right text-success">$
<span id="earning-year">
328.81 </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
One ruleset:
table.table.stats {display:inline-table}
display: inline-table behavior is simply a table that will sit inline with elements instead of the default behavior of occupying the whole width and pushing everything at its left and right -- up and down.
you might have a more complicated environment with your real code so you can
Chain the classes to get higher specificity which may be overkill but with Bootstrap it is common necessity.
table.table.stats.table.stats {display:inline-table}
Demo
table.table.stats {
display: inline-table
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-6">
<h2>Specifications</h2>
<table class="table stats">
<tbody>
<tr>
<th>Price :</th>
<td class=" text-right">
100 </td>
</tr>
<tr>
<th>Manufacturer:</th>
<td class=" text-right">
Gigabyte </td>
</tr>
<tr>
<th>Wattage:</th>
<td class=" text-right">
150 </td>
</tr>
<tr>
<th>Product:</th>
<td class=" text-right">
Product 1 </td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6">
<h2>Earning</h2>
<table class="table stats">
<tbody>
</tbody>
<thead>
<tr>
<th>Period</th>
<th class="text-right">Rev</th>
<th class="text-right">Cost</th>
<th class="text-right">Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hour</td>
<td class="text-right text-info">$
<span id="rev-hour">
0.022 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-hour">
0.006 </span>
</td>
<td class="text-right text-success">$
<span id="earning-hour">
0.016 </span>
</td>
</tr>
<tr>
<td>Day</td>
<td class="text-right text-info">$
<span id="rev-day">
1.34 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-day">
0.36 </span>
</td>
<td class="text-right text-success">$
<span id="earning-day">
0.98 </span>
</td>
</tr>
<tr>
<td>Week</td>
<td class="text-right text-info">$
<span id="rev-week">
9.37 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-week">
2.52 </span>
</td>
<td class="text-right text-success">$
<span id="earning-week">
6.85 </span>
</td>
</tr>
<tr>
<td>Month</td>
<td class="text-right text-info">$
<span id="rev-month">
37.48 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-month">
10.08 </span>
</td>
<td class="text-right text-success">$
<span id="earning-month">
27.40 </span>
</td>
</tr>
<tr>
<td>Year</td>
<td class="text-right text-info">$
<span id="rev-year">
449.77 </span>
</td>
<td class="text-right text-danger">$
<span id="cost-year">
120.96 </span>
</td>
<td class="text-right text-success">$
<span id="earning-year">
328.81 </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
Is there any other way to remove the horizontal line of the table but the header should not? I'm using the table-sm, but it seems I cannot include it.
.table-no-bottom-border,
.table-no-bottom-border td {
border-top: 0px solid white !important;
border-bottom: 0px solid white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en-US" web-base-url="http://localhost:1369">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Report</title>
<link type="text/css" rel="stylesheet" href="/web/content/302-9ddfff2/web.report_assets_common.css" data-asset-xmlid="web.report_assets_common" data-asset-version="9ddfff2">
<script type="text/javascript" src="/web/content/197-6f5d250/web.assets_common.js" data-asset-xmlid="web.assets_common" data-asset-version="6f5d250"></script>
<script type="text/javascript" src="/web/content/303-9ddfff2/web.report_assets_common.js" data-asset-xmlid="web.report_assets_common" data-asset-version="9ddfff2"></script>
</head>
<body class="container">
<div id="wrapwrap">
<main>
<div class="article o_report_layout_standard o_company_1_layout" data-oe-model="account.move" data-oe-id="2" data-oe-lang="en_US">
<div class="page">
<div class="row">
<div class="col-xs-6" style="width: 75%; padding-right: 20%;">
<table class="table table-sm o_main_table table-bordered" border="1">
<thead>
<tr>
<th class="text-center" colspan="2"><span>CUSTOMER</span></th>
</tr>
<tr>
<th class="text-left"><span>SHIP TO:</span></th>
<th class="text-left"><span>BILL TO:</span></th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr class="font-weight-bold o_line_section">
<td class="text-left"><span>Collision Center</span> <span>
<address class="mb-0" itemscope="itemscope" itemtype="http://schema.org/Organization">
<div>
<span itemprop="name">Collision Center</span>
</div>
<div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
<div class="d-flex align-items-baseline">
<span class="w-100 o_force_ltr d-block" itemprop="streetAddress">Sw 47 Terrace<br>Miami FL<br>United States</span>
</div>
</div>
</address>
</span>
</td>
<td class="text-left"><span>Collision Center</span> <span>
<address class="mb-0" itemscope="itemscope" itemtype="http://schema.org/Organization">
<div>
<span itemprop="name">Collision Center</span>
</div>
<div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
<div class="d-flex align-items-baseline">
<span class="w-100 o_force_ltr d-block" itemprop="streetAddress">Sw 47 Terrace<br>Miami FL<br>United States</span>
</div>
</div>
</address>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6">
<table class="table table-sm o_main_table table-bordered" border="1" style="width: 100%">
<thead>
<tr style="height: 10px">
<th class="text-center" colspan="2">
<span>TAX INVOICE #</span>
</th>
</tr>
</thead>
<tbody>
<tr class="font-weight-bold o_line_section text-center">
<td colspan="2">
<h3 style="color: red;"><strong><span>/</span></strong></h3>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<table style="width: 100%" class="table-sm o_main_table table-bordered" border="1">
<thead>
<tr>
<th class="text-left"><span>CUSTOMER ORDER NO</span></th>
<th class="text-left"><span>CUSTOMER CODE</span></th>
<th class="text-left"><span>DELIVERY DATE</span></th>
<th class="text-left"><span>INVOICE DATE</span></th>
<th class="text-left"><span>SHIPMENT NUMBER</span></th>
<th class="text-left"><span>PACKED BY</span></th>
<th class="text-left"><span>NO. OF PACKAGES</span></th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr class="font-weight-bold o_line_section">
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<table style="width: 100%;" class="table-sm table-bordered table-no-bottom-border" border="1">
<thead>
<tr>
<th class="text-left"><span>LINE NO.</span></th>
<th class="text-left"><span>PART NO.</span></th>
<th class="text-center"><span>DESCRIPTION</span></th>
<th class="text-left"><span>QUANTITY ORDERED</span></th>
<th class="text-left"><span>QUANTITY SUPPLIED</span></th>
<th class="text-left"><span>B.O.</span></th>
<th class="text-left"><span>PRICE</span></th>
<th class="text-left"><span>DISCOUNT</span></th>
<th class="text-left"><span>TOTAL AMOUNT</span></th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr class="font-weight-bold">
<td class="text-left"><span>1</span></td>
<td name="account_invoice_line_code">
<span>101006</span>
</td>
<td name="account_invoice_line_name"><span>[101006] G80 Master Link Large 6mm Type SD</span></td>
<td name="qty_delivered" class="text-right"><span>0</span></td>
<td name="qty_ordered" class="text-right"><span>1.00</span></td>
<td name="qty_bo" class="text-left"><span>0</span></td>
<td name="unit_price" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">5.73</span>
</td>
<td name="unit_discount" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">0.00</span>
</td>
<td name="sub_total" class="text-right o_price_total">
<span class="text-nowrap">$ <span class="oe_currency_value">5.73</span></span>
</td>
</tr>
<tr class="font-weight-bold">
<td class="text-left"><span>2</span></td>
<td name="account_invoice_line_code">
<span>101010</span>
</td>
<td name="account_invoice_line_name"><span>[101010] G80 Master Link Large Type SD 10/8mm</span></td>
<td name="qty_delivered" class="text-right"><span>0</span></td>
<td name="qty_ordered" class="text-right"><span>1.00</span></td>
<td name="qty_bo" class="text-left"><span>0</span></td>
<td name="unit_price" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">13.27</span>
</td>
<td name="unit_discount" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">0.00</span>
</td>
<td name="sub_total" class="text-right o_price_total">
<span class="text-nowrap">$ <span class="oe_currency_value">13.27</span></span>
</td>
</tr>
<tr class="font-weight-bold">
<td class="text-left"><span>3</span></td>
<td name="account_invoice_line_code">
<span>101208</span>
</td>
<td name="account_invoice_line_name"><span>[101208] G80 Multi Link Type MD 7/8mm</span></td>
<td name="qty_delivered" class="text-right"><span>0</span></td>
<td name="qty_ordered" class="text-right"><span>1.00</span></td>
<td name="qty_bo" class="text-left"><span>0</span></td>
<td name="unit_price" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">39.71</span>
</td>
<td name="unit_discount" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">0.00</span>
</td>
<td name="sub_total" class="text-right o_price_total">
<span class="text-nowrap">$ <span class="oe_currency_value">39.71</span></span>
</td>
</tr>
<tr class="font-weight-bold">
<td class="text-left"><span>4</span></td>
<td name="account_invoice_line_code">
<span>101806</span>
</td>
<td name="account_invoice_line_name"><span>[101806] G80 Chain Connector Type CL | 6mm to 32mm\r\n(6mm)</span></td>
<td name="qty_delivered" class="text-right"><span>0</span></td>
<td name="qty_ordered" class="text-right"><span>1.00</span></td>
<td name="qty_bo" class="text-left"><span>0</span></td>
<td name="unit_price" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">6.60</span>
</td>
<td name="unit_discount" class="text-right d-none d-md-table-cell">
<span class="text-nowrap">0.00</span>
</td>
<td name="sub_total" class="text-right o_price_total">
<span class="text-nowrap">$ <span class="oe_currency_value">6.60</span></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Also, is it possible to have a fixed height of a <td></td> even the <tbody></tbody> doesn't have record inside it?
<div class="row">
<table style="width: 100%" class="table-sm o_main_table table-bordered" border="1">
<thead>
<tr>
<th class="text-left"><span>CUSTOMER ORDER NO</span></th>
<th class="text-left"><span>CUSTOMER CODE</span></th>
<th class="text-left"><span>DELIVERY DATE</span></th>
<th class="text-left"><span>INVOICE DATE</span></th>
<th class="text-left"><span>SHIPMENT NUMBER</span></th>
<th class="text-left"><span>PACKED BY</span></th>
<th class="text-left"><span>NO. OF PACKAGES</span></th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr class="font-weight-bold o_line_section">
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
<td class="text-left"></td>
</tr>
</tbody>
</table>
</div>
Trying to put two tables next to one another. One col-md-4 and the other col-md-8 I want the 4 to be on the left and the 8 to be on the right. Left table being game messages and buttons while the right table is the tic tac toe board. My understanding is when using bootstrap I just need columns to add up to a total of 12.
</head>
<body class="bodyNormal">
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg"</td>
<td class="vert grid">8<img src="O.jpg"</td>
<td class="grid">9<img src="X.jpg"</td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg"</td>
<td class="vert hori grid">5<img src="X.jpg"</td>
<td class="hori grid">6<img src="O.jpg"</td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg"</td>
<td class="vert grid">2<img src="O.jpg"</td>
<td class="grid">3<img src="X.jpg"</td>
</tr>
</table>
</div>
</div>
</div>
<br />
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
You forgot one div close for col-md-4
</table></div> /*Close Here One div*/
<div class="col-md-8">
https://jsfiddle.net/lalji1051/y0k4bs6p/3/
Problem is you forgot to close div for col-md-4.
Updated code
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg" </td>
<td class="vert grid">8<img src="O.jpg" </td>
<td class="grid">9<img src="X.jpg" </td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg" </td>
<td class="vert hori grid">5<img src="X.jpg" </td>
<td class="hori grid">6<img src="O.jpg" </td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg" </td>
<td class="vert grid">2<img src="O.jpg" </td>
<td class="grid">3<img src="X.jpg" </td>
</tr>
</table>
</div>
</div>
</div>
I've been trying to make an HTML signature in apple mail, which seems to be working fine for me. However, when I get replies to my emails, I see that some email clients make the image extremely large. I thought I found the solution by specifying the dimensions multiple times, and it seemed to be working fine for a while, but now it has started again.
So my question is: how do I make sure the image remains the same size?
<!--start-->
<style type="text/css">a.link{margin:0;padding:0;border:none;text-decoration:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="format-detection" content="telephone=no">
<br/><br/> <!--line break-->
<!--image here-->
<table id="sig" width="320” cellspacing="0" cellpadding="0" border-spacing="0" style="width:320px;margin:0;padding:0;font-size: 12px;">
<tr> <!--indicates the row-->
<td valign="top" width="102" style="width:102px;margin:0;padding:0;">
<a href="website" title="My Name" style="border:none;text-decoration:none;">
<img moz-do-not-send="true"
src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Large_Scaled_Forest_Lizard.jpg"
alt="Random Image" width="102" height="102"
style="border:none;width:102px;height:102px;display:block">
</a>
</td>
<td width="10" style="width:10px;min-width:10px;max-width:10px;margin:0;padding:0;">
</td>
<!--here starts the text/names etc-->
<td style="margin:0;padding:0;">
<table id="sig2" cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0;margin:0;font-family:'Lucida Grande',sans-serif;font-size:12px;line-height:10px;color:#000000;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong>
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">MyName
</span>
</a>
</strong>
<span style="color:#00277C">|
</span>
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000;font-style:italic">Function Title
</span>
</a>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="mailto:MyEmail" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">hello#example.com
</span>
</a>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> +1 23 45 67 89 23
</span>
</td>
</tr>
<tr>
<td height="8" style="height:8px;font-size:8px;mso-line-height-rule:exactly;line-height:8px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<strong>
<span style="color:#000000">CompanyName
</span>
</strong>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<span style="color:#000000">Adress
</span>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> ZipCode
</span>
</td>
</tr>
<tr>
<td height="5" style="height:5px;font-size:5px;mso-line-height-rule:exactly;line-height:5px;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Lucida Grande',sans-serif;white-space:nowrap;">
<a href="website" style="border:none;text-decoration:none;color:#000000;">
<span style="color:#000000">www.example.com
</span>
<span style="color:#00277C">|
</span>
<span style="color:#000000"> +1 23 457 2462 35
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/> <!--line break-->
<!--end-->
I really hope someone can help me, thanks in advance!
i have costume model that add some fields to invoice report , but i need to move up tax table up.do i need to delete rows.
is it done by doing something like this?
<xpath expr="//div[#class='row mt32 mb32']" position="attributes">
<attribute name="class">row mt8 mb8</attribute>
</xpath>
EDITED:
i'm extending Account invoice report addons/account/report_invoice.xml bellow is the table that i want to move up. i can't past all report here as it is to big.
EDIT2
https://github.com/odoo/odoo/blob/9.0/addons/account/views/report_invoice.xml link to original report. i want to move up tax table along side subtotal table. :)
<div class="row">
<div class="col-xs-4 pull-right">
<table class="table table-condensed">
<tr class="border-black">
<td><strong>Subtotal</strong></td>
<td class="text-right">
<span t-field="o.amount_untaxed" t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
<t t-foreach="o._get_tax_amount_by_group()" t-as="amount_by_group">
<tr>
<td><span t-esc="amount_by_group[0]"/></td>
<td class="text-right">
<span t-esc="amount_by_group[1]"/>
</td>
</tr>
</t>
<tr class="border-black">
<td><strong>Total</strong></td>
<td class="text-right">
<span t-field="o.amount_total" t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</table>
</div>
</div>
<div class="row" t-if="o.tax_line_ids">
<div class="col-xs-6">
<table class="table table-condensed">
<thead>
<tr>
<th>Tax</th>
<th class="text-right">Base</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.tax_line_ids" t-as="t">
<td><span t-field="t.name"/></td>
<td class="text-right">
<span t-field="t.base"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
<td class="text-right">
<span t-field="t.amount"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You can do it using following way :
Add tax table before total section and remove existing one.
<template id="account_invoice_report_document_tax_table_ept" inherit_id="account.report_invoice_document">
<xpath expr="//div[#t-if='o.tax_line_ids']" position="replace">
</xpath>
<xpath expr="//div[#class='col-xs-4 pull-right']" position="before">
<div t-if="o.tax_line_ids">
<div class="col-xs-6">
<table class="table table-condensed">
<thead>
<tr>
<th>Tax</th>
<th class="text-right">Base</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr t-foreach="o.tax_line_ids" t-as="t">
<td><span t-field="t.name"/></td>
<td class="text-right">
<span t-field="t.base"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
<td class="text-right">
<span t-field="t.amount"
t-field-options='{"widget": "monetary", "display_currency": "o.currency_id"}'/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</xpath>
</template>
This may help you.
I have attempted to hide the time column on the kendo scheduler agenda view using the following CSS.
.k-scheduler-timecolumn{
visibility:collapse !important;
width:0 !important;
}
<tbody>
<tr>
<td>
<div style="padding-right: 16px;" class="k-scheduler-header k-state-default">
<div class="k-scheduler-header-wrap">
<table class="k-scheduler-table">
<tbody>
<tr>
<th colspan="1" class="k-scheduler-datecolumn">
Date
</th>
<th colspan="1" class="k-scheduler-timecolumn">
Time
</th>
<th colspan="1" class="">
Event
</th>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="height: 525px;" class="k-scheduler-content">
<table class="k-scheduler-table">
<tbody>
<tr class="" role="row" aria-selected="false">
<td class="k-scheduler-datecolumn k-first" rowspan="1">
<strong class="k-scheduler-agendaday">27</strong><em class="k-scheduler-agendaweek">Friday</em>
<span class="k-scheduler-agendadate">
March, 2015
</span>
</td>
<td class="k-scheduler-timecolumn">
<div>
9:00 AM-5:00 PM
</div>
</td>
<td>
<div class="k-task" title="This is a title" data-uid="478d253e-a46d-40e8-9194-4dbb70d752a9">
<span class="k-scheduler-mark" style="background-color:#ADC4CC">
</span>blah blah blah
</div>
</td>
</tr>
<tr class="" role="row" aria-selected="false">
<td class="k-scheduler-datecolumn k-first" rowspan="1">
<strong class="k-scheduler-agendaday">28</strong><em class="k-scheduler-agendaweek">Saturday</em>
<span class="k-scheduler-agendadate">
March, 2015
</span>
</td>
<td class="k-scheduler-timecolumn">
<div>
9:00 AM-5:00 PM
</div>
</td>
<td>
<div class="k-task" title="This is a title" data-uid="fcafd1c1-1c96-4b78-a286-b98264fffe0d">
<span class="k-scheduler-mark" style="background-color:#ADC4CC">
</span>blah blah blah
</div>
</td>
</tr>
<tr class="" role="row" aria-selected="false">
<td class="k-scheduler-datecolumn k-first" rowspan="1">
<strong class="k-scheduler-agendaday">30</strong><em class="k-scheduler-agendaweek">Monday</em>
<span class="k-scheduler-agendadate">
March, 2015
</span>
</td>
<td class="k-scheduler-timecolumn">
<div>
8:00 AM-4:00 PM
</div>
</td>
<td>
<div class="k-task" title="This is a title" data-uid="fad7d9d9-94e0-4927-8497-4892919d7659">
blah blah blah
</div>
</td>
</tr>
<tr class="" role="row" aria-selected="false">
<td class="k-scheduler-datecolumn k-first" rowspan="1">
<strong class="k-scheduler-agendaday">03</strong><em class="k-scheduler-agendaweek">Friday</em>
<span class="k-scheduler-agendadate">
April, 2015
</span>
</td>
<td class="k-scheduler-timecolumn">
<div>
8:00 AM-4:00 PM
</div>
</td>
<td>
<div class="k-task" title="This is a title" data-uid="d29639e6-2eff-4904-9152-a57384f940a3">
<span class="k-scheduler-mark" style="background-color:#92B06A">
</span>blah blah blah
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
This works in Firefox and Chrome.
But in IE the column width is tiny but still there.
Internet Explorer has been known to have problems with "visibility: collapse".
Try using:
display: none
OR:
visibility: hidden
Instead of:
visibility: collapse