How can I hover just one cell of a table? I don't want to hover all of the row. Here is my table HTML:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="danger" colspan="4">Comprobante de Pago</th>
</tr>
</thead>
<tr>
<td class="warning" width="10%">Fecha:</td>
<td colspan="2" id="vertical_align">sdf</td>
</tr>
<tr>
<td rowspan="3" colspan="1" class="asd">Client</td>
<td colspan="1">NAME</td>
<td colspan="1">NAME 2</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr class="info">
<td colspan="3">asd</td>
</tr>
Note: I'm using Bootstrap for the hover.
(I don't mind if the problem can be fixed without using Bootstrap.)
Try this
table td:hover{
background-color: magenta;
}
then remove the class table-hover here <table class="table table-hover table-bordered">
You need to overwrite bootsrap rules with a selector strong enough : see specifity.
Seems to be tr:hover to reset here first :
.table.table-hover.table-bordered tr:hover {/* selector strong enough to overwrite bootsrap rule */
background:none;/* remove bg */
}
Then apply the rule you need to your tds, using any attributes used here (class, id, colspan, rowspan, ...)
.table.table-hover.table-bordered tr:hover {
background: none;
}
td:hover {
background: lightgray;
}
/* a few selector examples */
td[colspan]:hover {
background: lime;
}
td[colspan] + td[colspan]:hover {
background:turquoise;
}
td[colspan="2"]:hover {
background: gold;
}
td[rowspan]:hover {
background: tomato;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="danger" colspan="3">Comprobante de Pago</th>
</tr>
</thead>
<tr>
<td class="warning" width="10%">Fecha:</td>
<td colspan="2" id="vertical_align">sdf</td>
</tr>
<tr>
<td rowspan="3" class="asd">Client</td>
<td colspan="1">NAME</td>
<td colspan="1">NAME 2</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr class="info">
<td colspan="2">asd</td>
</tr>
</table>
Notice: i updated the table code about rowspan and colspan values (colspan="1" doesn't even nedd to be set, it is defaut value)
Apply the formatting to the TD element.
.table td:hover{
background-color: green;
}
that should do the trick...
table tr td:hover{
background-color:red;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="danger" colspan="4">Comprobante de Pago</th>
</tr>
</thead>
<tr>
<td class="warning" width="10%">Fecha:</td>
<td colspan="2" id="vertical_align">sdf</td>
</tr>
<tr>
<td rowspan="3" colspan="1" class="asd">Client</td>
<td colspan="1">NAME</td>
<td colspan="1">NAME 2</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr class="info">
<td colspan="3">asd</td>
</tr>
</table>
you can use important.
.table td:hover{
background-color: red !important;
}
Related
I have a simple table structure.
table > tbody > tr > td{
text-align:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
The question is : How can I align td-s content left and center. ?
The output should be something like this :
If you are wanting the lower cells to be left justified from the centre, then just add padding-left 50% to your body cells
.table tbody td {
padding-left: 50%;
text-align;
left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
C 1
</td>
</tr>
<tr>
<td class="col-md-4">
Client 2
</td>
</tr>
</tbody>
</table>
If you want them centred to the largest word, then left-aligned, you cannot have separate rows for the tbody, you would need to wrap all the words in an inline block div:
.col-md-4 {
text-align: center;
}
.inline-block {
display: inline-block;
text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-4">
<div class="inline-block">
C 1<br> Client 2
</div>
</td>
</tr>
</tbody>
</table>
Try this:
td {
width: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
If you can't add extra table-cells you could use padding:
.table tbody td {
padding-left: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
</tr>
</thead>
<tbody>
<tr>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
td {
width: 50%;
}
td:last-child {
border-left:1px solid #333;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
<thead>
<tr>
<td>Client</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
C 1
</td>
</tr>
<tr>
<td>
</td>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
Try colspan="<number of columns to merge>" and rowspan="<number of rows to merge>" to merge row or column:
<table>
<thead>
<tr>
<td colspan="2" align="center">Client</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" width="50%"></td>
<td>
C 1
</td>
</tr>
<tr>
<td>
Client 2
</td>
</tr>
</tbody>
</table>
I would like to construct a table as follows:
I am trying to construct same table in html but having trouble. Table header needs to be exact. Any help is helpful
You can use the rowspan attribute:
th {
border:1px solid #000;
height: 20px;
width: 150px;
}
<table>
<thead>
<tr>
<th rowspan="4">#</th>
<th>Name</th>
<th rowspan="2">Permanent Address</th>
<th rowspan="2">Type of Job</th>
<th rowspan="2">Start work</th>
</tr>
<tr>
<th>ID</th>
</tr>
<tr>
<th>M/F</th>
<th rowspan="2">Contract</th>
<th rowspan="2">Place of Work</th>
<th rowspan="2">Work Stops</th>
</tr>
<tr>
<th>Birth</th>
</tr>
</thead>
</table>
FYI: there is also a colspan attribute if you need to span multiple columns.
Try this......
body {
padding: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td rowspan="4">#</td>
<td>Name</td>
<td rowspan="2">Permanent Address</td>
<td rowspan="2">Type of Job</td>
<td rowspan="2">Start work</td>
</tr>
<tr>
<td>ID</td>
</tr>
<tr>
<td>M/F</td>
<td rowspan="2">Contract</td>
<td rowspan="2">Place of Work</td>
<td rowspan="2">Work Stops</td>
</tr>
<tr>
<td>Birth</td>
</tr>
</tbody>
</table>
I am working on a system (maybe you guessed it from the snippet, it's confluence) and try to style tables.
Important
I have no chance to modify the table-html output, I can only add some CSS styles. The tables can occur in every combination on a page and are added by users.
This is the structure and possible table comibnations - this is only an example - there are other combinations.
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
The Problem is the Fourth table - I found no way to add a border-right to 1.1, which is column and row header. Does anyone see a pure CSS solution?
In a future step, there might also be headers in the middle of a table...
Make use of nth-of-type pseudo selector as below to select 4th table and add border to right-side of th first-child.
The :nth-of-type(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings with the same element name before it in the document
tree, for a given positive or zero value for n, and has a parent
element.
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
border-right:2px solid #CC0018;
}
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
border-right:2px solid #CC0018; /*Add this*/
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
Your problem, more generally
You have the following structure in your HTML.
element.A1
element.A2
element.B1
element.B2
Now, you want to style A2 depending on some properties B2 has. For example, if B2 is present, if B2 is a specific type of element (like a div or span), if it has a certain attribute ([data-foo="bar"]), et cetera.
Solving using CSS
Unfortunately, it is currently not possible to do this using a pure CSS solution. This is because all selectors in CSS go from an element to any descendant of that element, but never the other way around. For example, a b selects all elements of type b that are a descendant of a. With a > b, only children of a type elements are considered. There is however no way to go the other way.
Solving using JS + CSS
For now, you can solve your problem by using a certain class and applying that class using JavaScript. Something along the lines of the following.
.A1.special .A2 {
/* special styling on A2 */
}
var b2s = document.querySelectorAll('.B2'), i;
for (i = 0; i < b2s.length; ++i) {
if (isSpecial(b2s[i])) {
b2s[i].parentNode.previousSibling.classList.add('special');
}
}
References: querySelectorAll, parentNode, previousSibling, classList.
The isSpecial function would check for whatever properties you would want to check for. In particular, I implemented your specific question in the following snippet.
// detect special case and add class for CSS styling
var firstRows = document.querySelectorAll('.confluenceTable tbody > tr:first-child'), i;
for (i = 0; i < firstRows.length; ++i) {
if (firstRows[i].querySelector('th') !== null) {
firstRows[i].parentNode.parentNode.classList.add('special');
}
}
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
/* add styling for the exceptional case */
table.confluenceTable.special > thead > tr > th:first-child{
border-right:2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
Try this)
body > .confluenceTable:nth-child(12) thead tr:first-child th:first-child {
border-right: 2px solid #CC0018;
}
Live demo - https://jsfiddle.net/grinmax_/wxfL4ocg/
I have a table from n columns. Each cell has a class column-n.
I want to add on table class hide-column-n and hide all cells with class column-n.
Is this possible do it through css?
Example:
.table {
border: 1px solid black;
}
.table thead{
background-color: lightgray;
}
.table td{
border: 1px solid gray;
width: 50px;
}
<table class="table">
<thead>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
</thead>
<tbody>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Here is example https://jsfiddle.net/xr21kwrh/
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
.column-n{ display-none !important; }
</style>
If you use sass/scss you can do so (in SCSS):
#for $i from 1 through 10 {
.hide-column-#{$i} .column-#{$i} {
display: none;
}
}
it will compile to:
.hide-column-1 .column-1 {
display: none;
}
.hide-column-2 .column-2 {
display: none;
}
....
.hide-column-n .column-n {
display: none;
}
then use it like expected:
<table class="table hide-column-1 hide-column-2">
codepen demo here
Good evening, I'm trying to align a table to make it like the picture, but failed to do so, I could help?
Now I have it like this:
and I'd like it to look like this:
This is my html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>
Specifying the colspan for the cells in the summary row will shift the final cell right.
<th colspan="4" class="text-right" scope="row">TOTAL</th>
Alternatively, you could start the row with a <td> with colspan="3", and using a class that would have no borders (controlled by your css).
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
Without that class, direct manipulation of style may work.
<td style="border:0" colspan="3"></td>
<th class="text-right" scope="row">TOTAL</th>
Updated snippet:
table {
border-collapse: collapse;
font-family: arial;
}
td,
th {
width: auto;
margin: 2px;
padding: 3px;
text-align: left;
border: 1px solid grey;
}
.noborders {
border: 0;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>