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>
Related
Can somebody please explain to me why the second row is not on a new line?
$(document).ready(function() {
$('.rotate').css('height', $('.rotate').width());
});
td {
border-collapse: collapse;
border: 1px black solid;
}
th {
border: 1px black solid;
border-collapse: collapse;
}
tr {
text-align: center;
}
.rotate {
-webkit-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</table>
(fiddle)
rowspan="2" in the th elements (even in all of them) doesn't really make sense. If you remove it, you get a regular table:
table {
border-collapse: collapse;
}
td, th {
border: 1px dotted #aaa;
}
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<tr>
<th>EON</th>
<th colspan="2">ERA</th>
<th colspan="3">PERIOADA</th>
<th colspan="2">Cicluri orogenice</th>
<th>Mil. ani în urmă</th>
<th colspan="4">Viețuitoare tipice</th>
</tr>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</table>
Use thead and tbody tag
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<thead>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</tbody>
</table>
Just include row of head part (<th>) to the <thead> tag and the other part of the row inlude in <tbody>. Hope it will help work as you expect.
td {
border-collapse: collapse;
border: 1px black solid;
}
th {
border: 1px black solid;
border-collapse: collapse;
}
tr {
text-align: center;
}
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<thead>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</tbody>
</table>
I want to Design a table that has multiple headers. The table design is there:
Have a look at this fiddle
All about colspan and rowspan
<table>
<thead>
<tr>
<th rowspan="2" colspan="1" >
Client Name
</th>
<th rowspan="2" colspan="1">
Date
</th>
<th rowspan="1" colspan="5">
All Appointments
</th>
<th rowspan="1" colspan="3" >
Fulfilled Appointments
</th>
</tr>
<tr>
<th>Total number of individual appointments</th>
<th >Hours Of Care Delivered</th>
<th>Total Value</th>
<th>Average Cost Per Hour</th>
<th>Average Cost Per Hour Per Carer</th>
<th>Total Number</th>
<th>Hours Of Care Fulfilled</th>
<th>Total Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
<html>
<head>
<title>Table</title>
<style>
table,th,td {
border: 2px solid red;
border-collapse: collapse;
}
.heightu{
height: 212px;
}
div.First {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Second {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Third {
border: 1px solid red;
width: 39px;
height:10px;
left: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Sl.No</th>
<th rowspan="2">Name</th>
<th colspan="2">Date:15/05/2021</th>
<th rowspan="2">Do </th>
</th>
</tr >
<tr>
<th rowspan=>Start Hour</th>
<th rowspan=>End Hour</th>
</tr>
<tr>
<td>1</td>
<td>John Ddoe</td>
<td ><div class="First"></div></td>
<td><div class="Second"> </div></td>
<td><div class="Third"></div></td>
</tr>
<tr class="heightu">
<td></td>
<td></td>
</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
</body>
</html>
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>
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;
}
I wan to arrange columns in my thead to look like the below image
This my code
<thead>
<tr>
<td style="text-align: center;">SUBJECT</td>
<td style="text-align: center;" colspan="3">CA<br> T1 T2 T3</td>
<td style="text-align: center;">CA TOTAL (40)</td>
<td style="text-align: center;">SIGN</td>
</tr>
</thead>
But it displays like this, how can I split the 'CA' column
You need take 2 rows for thead for display.
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
</table>
</body>
</html>
You can't split a cell into more cells, you can only merge existing cells together. That said, if you want to have five columns you need to create five columns, and rather than using a <br> to force content to a new line in one cell, and then fake separate cells, use two rows of cells. This, of course, requires the appropriate use of the colspan and rowspan attributes, such as the following:
table {
border-collapse: collapse;
}
th,
td {
text-align: center;
border: 1px solid #000;
min-width: 4em;
min-height: 2em;
padding: 0.2em 0.5em;
}
th {
vertical-align: top;
}
<table>
<thead>
<tr>
<!-- rowspan="2" forces the following <th> element
to span two rows in its containing element: -->
<th rowspan="2">SUBJECT</th>
<th colspan="3">CA</th>
<!-- as it does here also: -->
<th rowspan="2">CA TOTAL (40)</th>
</tr>
<tr>
<!-- this <tr> contains only three <th> elements,
unlike the previous <tr> which contains five,
because two <th> elements of the previous row
will occupy space in this <tr> also -->
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
</tr>
</tbody>
</table>
JS Fiddle demo.
Incidentally, where possible try to style your content via the use of stylesheets; this makes it far easier to update your style and presentation in future.
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
Use rowspan and 2 trs
th { vertical-align: top; border: 1px solid black;}
<table>
<thead>
<tr>
<th rowspan="2" style="text-align: center;">SUBJECT</th>
<th style="text-align: center;" colspan="3">CA</th>
<th rowspan="2" style="text-align: center;">CA TOTAL (40)</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
</table>
You can use this. Working perfectly:
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
border: 1px solid #000;
}
</style>
<table>
<thead>
<tr>
<th rowspan="2" >SUBJECT</th>
<th colspan="3">CA</th>
<th rowspan="2">CA TOTAL (40)</th>
<th rowspan="2">SIGN</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>