I have a table contains two header rows Demo.
<thead>
<tr>
<th colspan="4"><big>Variable Details</big></th>
</tr>
<tr>
<th>Variable Name</th>
<th>Starting Value</th>
<th>Default Value</th>
<th>Description</th>
</tr>
</thead>
I want to freeze the top two header rows (thead section of the table). Any thoughts.
After referring many web-site links, I am able to fix two header rows using pure CSS. Updated fix.
<div id="header-wrap"><b>Variable Details</b>
<table border=1 cellpadding=0 cellspacing=0 width=100% style="margin-top:5px">
<thead>
<tr>
<td background-color:#E0EBEB;"><b>Variable Name</b></td>
<td background-color:#E0EBEB;"><b>Starting Value</b></td>
<td background-color:#E0EBEB;"><b>Default Value</b></td>
<td background-color:#E0EBEB;"><b>Description</b></td>
</tr>
</thead>
</table>
</div>
CSS:
#header-wrap { position: fixed; width: 100%; height: 55px; top: 0; text-align:center; background-color:#F0F0F0; margin-top:0px; margin-bottom:40px;}
td {width:25% }
Change the CSS property position to "sticky" in order to get a sticky table head. See below.
CSS:
thead { position: sticky; top: 0px; z-index: 10; }
NOTE: You may have to adjust your z-index depending on your other CSS properties.
Related
I have a simple table design, a square with 3x3 cells -think Rubik's cube. I want this table's width to always be 30% of the window and I don't want the height/width ratio change if the browser window is being resized. Also I want the inner 3x3 cells to be able to keep text and/or images without the symmetry being distorted. Is this possible with only css/javascript? I've tried sooooooooo many things but none has been working so far.
EDIT: I've added one of my many attempts to solve this below. The code works in Chrome when I try it in the broswer... but not here for some reason. However, it didn't solve my initial problem so I guess it's no problem.
function getTableWidth(){
var element = document.getElementById("table");
var intElemClientWidth = element.clientWidth;
document.getElementById("table").style.height=intElemClientWidth;
}
.cell{
height: 33%;
width: 33%;
<div onclick="getTableWidth()">Get 1:1 ratio</div>
<table id="table" width="30%" border="1">
<tbody>
<tr>
<td class="cell">1</td>
<td class="cell">2</td>
<td class="cell">3</td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</tbody>
</table>
I see what you mean. Let me provide a modified solution from here: html make <td> height proportional to the width
table {
width: 30%;
}
td {
border: 1px solid black;
position: relative;
}
td > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
td:before {
content: "";
display: block;
padding-top: 100%;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
</table>
Yep it's possible just with HTML and some styling, you can easily control the table's width using percentages (Yes they are responsive):
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:30%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table
I have a HTML table which is generated by back-end (C#). I want to Fix the Header (2 Rows having Sale Type & Location) and First Two columns (Product Name & Description).
My table looks like the following:
The Header Row has a rowspan of 2 & the First Two columns(Under Description) also need to be freezed.
I have tried the following code:
<script>
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
$('.firstrow').css("left", $("tbody").scrollLeft());
});
});
</script>
<table id="ContentPlaceHolder1_tbl_Currentday" class="table table-responsive ReportTbl table-bordered">
<tr class="firstrow">
<th colspan="2" rowspan="2">Description</th><th colspan="12">Daily Sales</th><th colspan="11">MONTH TO DATE SALES</th><th colspan="3">FORECAST</th><th colspan="12">AVAILABLE STOCK</th><th colspan="10">IN TRANSIT QUANTITY</th>
</tr>
<tr class="firstrow">
<th>PROD QTY</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>MTD</th><th>TOTAL</th><th class="totaltd">ACH%</th><th>FAC</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th>
</tr><tr>
<td rowspan="3" style="font-weight:bold;"> AAMRUS</td><td> AAMRUS CANDY - (BAG) - (35X60) - (670)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>3,572</td><td>202</td><td>926</td><td>36</td><td>414</td><td>1,417</td><td>562</td><td>0</td><td>1,310</td><td>0</td><td class="totaltd">8,439</td><td>9,065</td><td>16,997</td><td class="totaltd">93.09%</td><td>2,426</td><td>432</td><td>531</td><td>0</td><td>167</td><td>651</td><td>327</td><td>243</td><td>4</td><td>0</td><td>36</td><td class="totaltd">2,391</td><td>0</td><td>0</td><td>0</td><td>0</td><td>152</td><td>304</td><td>0</td><td>228</td><td>0</td><td class="totaltd">684</td>
</tr><tr>
<td> AAMRUS CANDY - (BOX) - (70X30) - (1032)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>1,126</td><td>1,462</td><td>1,270</td><td>333</td><td>737</td><td>1,576</td><td>813</td><td>575</td><td>218</td><td>60</td><td class="totaltd">8,170</td><td>9,068</td><td>17,003</td><td class="totaltd">90.1%</td><td>4,872</td><td>723</td><td>590</td><td>964</td><td>522</td><td>613</td><td>597</td><td>634</td><td>441</td><td>646</td><td>74</td><td class="totaltd">5,804</td><td>0</td><td>441</td><td>252</td><td>252</td><td>315</td><td>126</td><td>252</td><td>0</td><td>0</td><td class="totaltd">1,638</td>
</tr><tr class="totaltd">
<td>Total</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>4,698</td><td>1,664</td><td>2,196</td><td>369</td><td>1,151</td><td>2,993</td><td>1,375</td><td>575</td><td>1,528</td><td>60</td><td>16,609</td><td>18,133</td><td>34,000</td><td>91.6%</td><td>7,298</td><td>1,155</td><td>1,121</td><td>964</td><td>689</td><td>1,264</td><td>924</td><td>877</td><td>445</td><td>646</td><td>110</td><td>8,195</td><td>0</td><td>441</td><td>252</td><td>252</td><td>467</td><td>430</td><td>252</td><td>228</td><td>0</td><td>2,322</td>
</tr>
</table>
it only freezed the First Column, NOR first Two columns, NOR first two Rows.
How can I achieve this please Help
thanks
Target output
Spreadsheet example of freezed multiple rows and columns
Box structure
Make a <div> container that will be the scrollable component. Make sure the <div> container has a fixed width and height, and should be smaller than the actual content.
Let B, C, and D be the freezed rows and columns.
Let A be the actual table content.
Make the components A, B, C, and D using the <table> tag.
HTML
<div id="container">
<table id="a">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>A4</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>B4</th>
</tr>
</thead>
<tbody>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
<table id="b">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>A4</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>B4</th>
</tr>
</thead>
</table>
<table id="c">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
</tr>
</thead>
<tbody>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
</tbody>
</table>
<table id="d">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
</tr>
</thead>
</table>
</div>
CSS
#container{
width:90px;
max-height:90px;
overflow: auto;
position: relative;
}
#a{
position: relative;
z-index: 1
}
#b{
background: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 2
}
#c{
background: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 2
}
#d{
background: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 3
}
JavaScript / jQuery
$('#container').scroll(function(event) {
var scrolledX = $(this).scrollLeft();
var scrolledY = $(this).scrollTop();
$(this).find('#c').css('left',scrolledX+'px');
$(this).find('#b').css('top',scrolledY+'px');
$(this).find('#d').css('left',scrolledX+'px');
$(this).find('#d').css('top',scrolledY+'px');
});
I have a table and I'm trying to print it. It's working fine in the normal mode but when I rotate my th then it is visible in the first print page but not visible on other pages.
th span {
transform-origin: 0 50%;
transform: rotate(-90deg);
white-space: nowrap;
display: block;
position: relative;
top: 0;
left: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<table class="table table-bordered">
<thead>
<tr>
<th><span style="transform-origin: 0 50%;
transform: rotate(-90deg);
white-space: nowrap;
display: block;
position: relative;
top: 0;
left: 50%;">Firstname</span></th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Screenshot of first and second print page:
First print page:
Second print page:
Note: This is working when I remove rotate span from th
What is missing?
Some browsers repeat the thead element on each page, as they are supposed to. But some browsers will not, you need to add extra css for your table header as
thead {display: table-header-group;}
Note: Opera 7.5 and IE 5 won't repeat headers no matter what you try.
For Print you may use separate CSS.
Add the code inside the print media like below.
#media print {
// Your code here
}
Hope it will work.
I got my answer it is fixed now & working fine because of now I use CSS in print script code instead of normal CSS.
You might need to give your th some padding
th {
padding: 3em;
}
What my print looks like after I add padding to th
I want to fix the table header when scrolling. And the rest of the page content to scroll. But the original layout of the table breaks. The width of the table columns and rows is of different size. I am not able to fix this.
My code:
HTML
<section class="scrollable padder">
<table class="table table-striped m-b-none text-sm m-t">
<thead class="ff">
<tr>
<th >1col</th>
<th >2col</th>
</tr>
</thead>
<tbody>
<tr>
<td class="new_td">field1</td>
<td class="new_td">field2</td>
</td>
</tbody>
</table>
</section>
JS
$(".padder").scroll(function() {
if ($(".padder").scrollTop() > 100) {
$('.ff').addClass('fixed');
}
else
{
$('.ff').removeClass('fixed');
}
});
CSS
.fixed{
position:fixed;
top:50px;
}
try this tag and let me know the result
<section class="scrollable padder">
<table class="table table-striped m-b-none text-sm m-t">
<thead class="ff">
<tr>
<th >1col</th>
<th >2col</th>
</tr>
</thead>
<tbody>
<tr>
<td class="new_td">field1</td>
<td class="new_td">field2</td>
</tr>
</tbody>
</table>
</section>
You can implement using this:
<table id="fixed"></table>
Css
#fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
Js
var $fix= $(".table > thead").clone();
var $hfxd = $("#fixed").append($fix);
$(".padder").scroll(function() {
if ($(".padder").scrollTop() > 100 && $fix.is(":hidden"))
{
$hfxd.show();
}
else
{
$hfxd.hide();
}
});
I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.
Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css.
Thanks a lot.
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
Use this:
tbody td:nth-of-type(3) {
text-align: right;
}
Example
table {
border-spacing: 0;
border-collapse: collapse;
font: 14px verdana;
}
td {
padding: 0.2em;
border: 1px solid gray;
}
tbody td:nth-of-type(3) {
text-align: right;
background: yellow;
width: 4em;
}
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
You can acheive this by specifying inline style for the header section seperately.
or make a little change in the css
like
thead .body-right { text-align:right; }