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>
Related
I want to change the below html to required format as in below image,
<div id="pdfTable" #pdfTable style="display: none;">
<table class="table table-borderless mb-0" style="font-size:14px;">
<thead>
<label for="" style="text-align: center;">Recommendation: </label>
<tr style="">
<td *ngFor="let recommendation of recommendations" style="border:0;width:25%">
<span *ngIf="recoName == recommendation.listTypeValueName">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYA alt="">
{{recommendation.listTypeValueName}}
</span>
<p *ngIf="recoName != recommendation.listTypeValueName"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAA alt="">
{{recommendation.listTypeValueName}} </p>
</td>
</tr>
</thead>
</table>
</div>
Required Format
What I am getting from above html
<div id="pdfTable" #pdfTable style="display: none;">
<table class="table table-borderless mb-0" style="font-size:14px;">
<thead>
<tr style="">
<th colspan="2" style="text-align: center;">Recommendation:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let recommendation of recommendations">
<td style="width:25%;text-align:center;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYA">
</td>
<td style="width:75%;text-align:left;">
{{recommendation.listTypeValueName}}
</td>
</tr>
</tbody>
</table>
</div>
The page I'm working on needs a collapsible element which I implemented with a Bootstrap horizontal collapse. In it there is a table. As the collapse collapses the table squishes and increases in height, both the table itself and each row, meaning the transition doesn't look smooth. This is especially noticeable when the element un-collapses since the rows don't resize till the collapse is fully expanded.
How do I keep the table consistent during the animation?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="item-statcard item-number w-25">
<p class="">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
</p>
<div class="">
<div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
<div class="card card-body statcard-body">
<table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
<tbody class="">
<tr class="">
<td colspan="2" class="">
<h2 class="">Table</h2>
</td>
</tr>
<tr class="">
<td class="" width="40%">Dimensions (L-w-h)</td>
<td class="">8.5 x 3.23 x 2.75 m</td>
</tr>
<tr class="">
<td class="">Total weight</td>
<td class="">28 tonnes</td>
</tr>
<tr class="">
<td class="">Crew</td>
<td class="">6</td>
</tr>
<tr class="">
<td class="" valign="top">Propulsion</td>
<td class="">diesel engine</td>
</tr>
<tr class="">
<td class="">Speed</td>
<td class="">50 km/h</td>
</tr>
<tr class="">
<td class="">Range</td>
<td class="">420 km</td>
</tr>
<tr class="">
<td class="">Total production</td>
<td class="">2020+</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
The solution was apparently keeping the inline styling Bootstrap provides, namely style="width: 300px;" for the card-body.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="item-statcard item-number w-25">
<p class="">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#statcard-collapse" aria-expanded="false" aria-controls="statcard-collapse">Statistics</button>
</p>
<div class="">
<div class="collapse collapse-horizontal show" id="statcard-collapse" style="float: right;">
<div class="card card-body statcard-body" style="width: 300px;">
<table id="statcard-table" class="texte_principal_small table" width="100%" cellspacing="0" cellpadding="5">
<tbody class="">
<tr class="">
<td colspan="2" class="">
<h2 class="">Table</h2>
</td>
</tr>
<tr class="">
<td class="" width="40%">Dimensions (L-w-h)</td>
<td class="">8.5 x 3.23 x 2.75 m</td>
</tr>
<tr class="">
<td class="">Total weight</td>
<td class="">28 tonnes</td>
</tr>
<tr class="">
<td class="">Crew</td>
<td class="">6</td>
</tr>
<tr class="">
<td class="" valign="top">Propulsion</td>
<td class="">diesel engine</td>
</tr>
<tr class="">
<td class="">Speed</td>
<td class="">50 km/h</td>
</tr>
<tr class="">
<td class="">Range</td>
<td class="">420 km</td>
</tr>
<tr class="">
<td class="">Total production</td>
<td class="">2020+</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
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 have dynamic values and base on that i want to show multiple html tables in qweb report.
I have py file from where i pass recordset in qweb xml file.
I want to add html table with database values in qweb from py file.
<table class="table table-condensed" style="border: 3px solid Darkblue;
border-collapse: collapse;">
<h3>Planning Menu</h3>
<thead>
<tr style="background:#DCDCDC">
<th class="text-left">
<strong>Product Name</strong>
</th>
<th class="text-left">
<strong>Source Location</strong>
</th>
<th class="text-left">
<strong>Destination location</strong>
</th>
<th class="text-left">
<strong>Quantity on Hand</strong>
</th>
<th class="text-left">
<strong>Quantity</strong>
</th>
<th class="text-left">
<strong>Unit Of masure</strong>
</th>
<th class="text-right">
<strong>Actual Quantity</strong>
</th>
</tr>
</thead>
<tbody style="color: #D8F0DA
background: transparent">
<t t-foreach="doc.service_line" t-as="o">
<tr align="center" style="color:red;">
<td colspan="7">Service ID:<span t-field="o.service_type_id"/></td>
</tr>
<!--<p><span t-field="o.service_type_id"/> </p>-->
<tr t-foreach="o.product_line" t-as="l">
<td class="text-left">
<span t-field="l.product_id"/>
</td>
<td class="text-left">
<span t-field="l.default_location_src_id"/>
</td>
<td class="text-left">
<span t-field="l.default_location_dest_id"/>
</td>
<td class="text-left">
<span t-field="l.qty_available"/>
</td>
<td class="text-left">
<span t-field="l.qty"/>
</td>
<td class="text-right">
<span t-field="l.uom_id"/>
</td>
<td class="text-right">
<span t-field="l.actual"/>
</td>
</tr>
</t>
</tbody>
</table>
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>