Rows with rowspan have bigger height - html

I'm building this html table:
<div class="parser-table-wrapper">
<table class="parser-table">
<thead>
<tr>
<th>Category</th>
<th>Value</th>
<th>Id</th>
<th>Number</th>
</tr>
</thead>
<tbody id="tbody-filter-market-country-specialty">
<tr class="parser-row">
<th rowspan="6">1</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">2</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">c</td>
<td class="parser-value-cell table-value-cell">c1</td>
<td class="parser-value-cell table-value-cell">3</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">d</td>
<td class="parser-value-cell table-value-cell">d1</td>
<td class="parser-value-cell table-value-cell">4</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">e</td>
<td class="parser-value-cell table-value-cell">e1</td>
<td class="parser-value-cell table-value-cell">5</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">f</td>
<td class="parser-value-cell table-value-cell">f1</td>
<td class="parser-value-cell table-value-cell">6</td>
</tr>
<tr class="parser-row">
<th rowspan="2">2</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">2</td>
</tr>
<tr class="parser-row">
<th rowspan="2">3</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row">
<th rowspan="2">4</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">2</td>
</tr>
</tbody>
</table>
</div>
with the following css:
body {
font-family: "lato",Arial,sans-serif;
color: rgba(0,0,0,0.84);
font-weight: 400;
line-height: 1.4em;
}
.parser-table-wrapper {
border: 1px solid #9e9e9e;
border-radius: 2px;
margin: 18px 10% 12px 10%;
overflow-x: auto;
}
.parser-table-wrapper table {
width: 100%;
border-radius: 3px;
box-shadow: 1px 1px 1px #9e9e9e;
}
.parser-table-wrapper table th, .parser-table-wrapper table td {
border-bottom: 0px;
font-size: 15px;
line-height: 1.25;
min-width: 30px;
max-width: 120px;
text-align: left;
}
.parser-table-wrapper table th {
padding: 6px;
background-color: #dcdcdc;
}
.parser-table-wrapper table td.table-value-cell {
height: 30.4px;
padding-left: 6px;
}
.parser-table-wrapper table tbody tr th {
background-color: #fff;
border-bottom: 1px solid #cdcdcd;
}
.parser-table-wrapper table tbody tr:nth-child(even) td {
background-color: #efefef;
}
.parser-table-wrapper table tbody .last-value-row {
border-bottom: 1px solid #cdcdcd;
}
.parser-table-wrapper table tfoot {
background-color: #e2e2e2;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody {
border-top: 1px solid #ccc;
}
and I want that all rows to have the same height but it seems the first row of each category (the ones containing a th with a rowspan attribute) add an extra 0.8px, even if I set the height to a specific value. Any ideas how to solve this issue?
here is the jsfiddle: https://jsfiddle.net/89x0j6a4/
Edit: Seems like adding a border to the tr and the border-collapse style to table affects the rows height. Any idea how to add those borders without affecting the row height?

Related

How to make the last row of a table frozen?

I'm able to make the first row of an HTML table frozen similar to Freeze Panes in MS Word, but not sure how to do it for the last row in the table.
I have this code:
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
.table-header-col {
position: sticky;
top: 0px;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>
I only included two rows here for an example, but if I have 50 rows, the user will have to scroll to get to the last row which contains a total. Is it possible to make that row Freeze similar to the way I'm making the header row freeze above?

are you want something like this :)
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
table tbody tr:last-child{
position: sticky;
top: 0;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>

you can try this one.
worked for me:
table{
width: 400px;
position: relative;
background: transparent;
display: block;
padding-bottom: 42px;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table ::-webkit-scrollbar {
width: 0px;
}
table > thead {
height: 30px;
text-align: end;
position: sticky;
top: 0;
display: table;
width: 100%;
background: green;
}
table > thead > tr{
height: 30px;
background-color: #009879;
color: #ffffff;
text-align: left;
}
table > thead > tr > th{
text-align: end;
}
table > tbody{
height: 200px;
display: block;
width: 100%;
overflow: auto;
background: pink;
}
table > tbody > tr{
height: 30px;
text-align: end;
display: table;
width: 100%;
}
table > thead > tr > th,
table > tbody > tr > td{
padding: 12px 15px;
}
table > tbody > tr{
border-bottom: 1px solid #dddddd;
}
table > tbody > tr:nth-of-type(even) {
background-color: #f3f3f3;
}
table > tbody > tr:last-of-type {
border-bottom: 2px solid #009879;
}
table > tbody > tr:last-child{
position: absolute;
bottom: 0;
}
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
<tr>
<td>text2.1</td>
<td>text2.2</td>
<td>text2.3</td>
</tr>
<tr>
<td>text3.1</td>
<td>text3.2</td>
<td>text3.3</td>
</tr>
<tr>
<td>text4.1</td>
<td>text4.2</td>
<td>text4.3</td>
</tr>
<tr>
<td>text5.1</td>
<td>text5.2</td>
<td>text5.3</td>
</tr>
<tr>
<td>text6.1</td>
<td>text6.2</td>
<td>text6.3</td>
</tr>
<tr>
<td>text7.1</td>
<td>text7.2</td>
<td>text7.3</td>
</tr>
<tr>
<td>text8.1</td>
<td>text8.2</td>
<td>text8.3</td>
</tr>
<tr>
<td>text9 .1</td>
<td>text9 .2</td>
<td>text9 .3</td>
</tr>
</tbody>
</table>

How to create summary sheet like html tables

I am working with HTML tables and need to achieve like attached image.
When I try to achieve this,I caught problem like this
① I couldn't figure out how not to display border line.
② Each cell size is not aligned compared to desired result.
I would like to achieve in a certain way. If you have any opinion, please let me know.
Thanks
table {
border-collapse:collapse;
table-layout: fixed;
text-align: center;
width: 10rem;
height: 10rem;}
td {
border:solid black 1px;
}
.noborder {
}
.noborder2{
}
<table>
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>

You can do something like this using empty-cells: hide;.
Note: but the border is bit off since it removes the td border where the content doesn't exists. If that's ok.
.tbl {
empty-cells: hide;
border: 1px solid #999;
}
td {
background: #fff;
border: 1px solid #999;
padding: 10px 15px;
cursor: pointer;
}
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
Here is the another version:
.MainDiv {
border: 1px solid #999;
display: inline-block;
}
table.tbl {
empty-cells: hide;
}
td.noborder {
background: #fff;
border: 1px solid #999;
width: 50px;
height: 50px;
text-align: center;
}
td.removeBorder {
width: 100px;
height: 50px;
}
td:empty {
visibility: hidden;
}
<div class="MainDiv">
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" class="removeBorder">Total (summary)</td>
</tr>
<tr>
<td class="noborder">A</td>
<td class="noborder">B</td>
<td class="noborder">C</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder">1</td>
<td class="noborder">2</td>
<td class="noborder">3</td>
<td class="noborder">6</td>
</tr>
</tbody>
</table>
</div>

tbody vertical scroll with sticky column

I have a table with a sticky column (see jsfiddle below). But I´m trying to have a vertical scroll just on the table body so the headers are always visible and the height of tbody should be fixed. How can I do this?
body {
font: 16px Calibri;
}
table {
border-collapse: separate;
border-top: 3px solid grey;
}
td,th {
margin: 0;
border: 3px solid grey;
border-top-width: 0px;
white-space: nowrap;
}
div {
width: 600px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding-bottom: 1px;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-right: 0px none black;
border-top-width: 3px;
/*only relevant for first row*/
margin-top: -3px;
/*compensate for top border*/
}
.long {
background: yellow;
letter-spacing: 1em;
}
<div>
<table>
<thead>
<tr>
<th class="headcol">sticky col</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</tbody>
</table>
</div>
The end result should be similar to this:
http://demos.telerik.com/kendo-ui/grid/frozen-columns

You will need to set the position to fixed of the cell that you would like to remain fixed during vertical scroll.
.headcol {
position:fixed;
}

Table looks wrong in Chrome, after refreshing everything is ok

I've got problem with the table. On Firefox it looks great, but when I'm opening it on Chrome for first time table is in different position. Refresh repairs everything. What I did wrong?
CSS
#spec0{
background-color: #FFFFFF;
width: 566px;
border: 1px solid #ddd;
}
#spec1{
background-color: #F1F1F1;
width: 566px;
height: 20px;
}
#table {
border-collapse: collapse;
width: 566px;
border: 1px solid #ddd;
margin-top: 11px;
position: static;
}
#tr{
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
text-align: right;
}
#tr1{
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
}
#tr3{
height: 10px;
font-size: 11pt;
border: 1px solid #ddd;
text-align: left;
}
HTML
<table id="table">
<tr id="spec">
<th id="tr">Template</th>
<th id="tr3">Template</th>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr"></td>
<td id="tr1">Template</td>
</tr>
</table>
image; first launch from Chrome

You are using mutiple equal ID's , ID's must be unique , so change to class, and you were trying to apply #spec0 when you had only id="spec"
.spec {
background-color: #FFFFFF;
width: 566px;
border: 1px solid #ddd;
}
.spec1 {
background-color: #F1F1F1;
width: 566px;
height: 20px;
}
#table {
border-collapse: collapse;
width: 566px;
border: 1px solid #ddd;
margin-top: 11px;
position: static;
}
.tr {
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
text-align: right;
}
.tr1 {
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
}
.tr3 {
height: 10px;
font-size: 11pt;
border: 1px solid #ddd;
text-align: left;
}
<table id="table">
<tr class="spec">
<th class="tr">Template</th>
<th class="tr3">Template</th>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr"></td>
<td class="tr1">Template</td>
</tr>
</table>

Scrollable table contents html/css

I'm trying to make my table contents scrollable, I've had to create a table inside one of the table rows which means if the table has more than one row the contents isn't aligned with the correct heading as showing in the fiddle;
https://jsfiddle.net/f5ax5w2r/
thead.panel-heading {
background-color: #242a30;
border-color: #242a30;
border-bottom: 1px solid #242a30;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
width: 100%;
}
thead.panel-heading tr th {
color: #ffffff;
font-weight: 500;
padding: 10px 40px !important;
text-align: left;
}
tbody.panel-content {
background-color: #f0f3f4;
}
tbody.panel-content tr td {
padding: 10px 20px !important;
text-align: left;
}
tbody div {
overflow-x: hidden;
overflow-y: scroll;
height: 300px;
}
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td>
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

The number of table cells do not match in each table row in your code. Adding the correct colspan value should do it.
thead.panel-heading {
background-color: #242a30;
border-color: #242a30;
border-bottom: 1px solid #242a30;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: move;
width: 100%;
}
thead.panel-heading tr th {
color: #ffffff;
font-weight: 500;
padding: 10px 40px !important;
text-align: left;
}
tbody.panel-content {
background-color: #f0f3f4;
}
tbody.panel-content tr td {
padding: 10px 20px !important;
text-align: left;
}
tbody div {
overflow-x: hidden;
overflow-y: scroll;
height: 300px;
}
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Try adding colspan="2" to the td which has table inside.
https://jsfiddle.net/f5ax5w2r/
<table>
<thead class="panel-heading">
<tr>
<th>Client</th>
<th>Client</th>
</tr>
</thead>
<tbody class="panel-content">
<tr>
<td colspan="2">
<div class="scrollit">
<table>
<tr>
<td>Alex Best</td>
<td>Yahoo Answers</td>
</tr>
<tr>
<td>Andrew Smith</td>
<td>Monkey Tube</td>
</tr>
<tr>
<td>James Harris</td>
<td>Limewire</td>
</tr>
<tr>
<td>Mike Anderson</td>
<td>Twitter</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>