table layout fixed - when th position is absolute - javascript

I have table inside a div,
<div class="divScroll">
<table class="table1">
<tr class="tableHeader">
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<td>Data5</td>
</tr>
.....
.....
</table>
</div>
My CSS,
.divScroll
{
height: 25px;
overflow-y: auto;
width: 100%
}
.table1
{
width: 100%;
table-layout: fixed;
}
.tableHeader
{
position: absolute;
}
In the above coed, I am trying to make table scrollable with fixed header. That means when user scroll top-> bottom table header should remain fixed only table data should be scrolled.
I can achieve, scrollable table but problem is th col width are not aligned with td col width Since i applied Position : absolute for 'th'.
How to make both th and td col width aligned properly?

It is a very common question, already answered in the past.
Here some local resources:
Table header to stay fixed at the top when user scrolls it out of view with jQuery
Table with fixed header and fixed column on pure css
And here another external:
Fixed Header Table

Related

Puppeteer - thead overlapping on page break ONLY when thead is cut off by footer on previous page

What I am trying to do?
I am using Puppeteer to convert raw HTML to PDF. I have saved the HTML code in a file, and I'm reading from that file and converting it to PDF.
What is the problem
The thead is NOT overlapping on every page, NO.
It is ONLY overlapping when a thread has multiple rows and half of it gets cut off because of the page break. On the next page, the remainder of the thead is printed ALONG with the overlapped entire thead.
Here is the Output of the converted PDF Overlapping thead
<table id='TblCustomerRating' class='display unbreakable' border='1' cellspacing='0' cellpadding='0'
style=' width: 100%;border-collapse:collapse;'>
<thead>
<tr>
<th class='Greyheader' align="center" style="padding-top: 5px; padding-bottom: 5px;" colspan="4">Askari
Cement Limited</th>
</tr>
<tr>
<th class='Greyheader' align="center" style="padding-top: 5px; padding-bottom: 5px;" colspan="4">External
Rating</th>
</tr>
<tr class='Greyheader'>
<th width="12%" align="center" class='Greyheader'><b> ECAI</b> </th>
<th width="12%" align="center" class='Greyheader'><b>Long Term</b></th>
<th width="12%" align="center" class='Greyheader'><b>Short Term</b></th>
<th style='display:none' width="12%" align="center" class='Greyheader'><b>Rating Date</b></th>
</tr>
</thead>
<tbody>
<tr id="4" type="data" LT="" ST="" MT="" class=" GreyBorder">
<td width="10%" agencyCode='4' class='GreyBorder'
style='background-color:lightgray;text-align: center;padding-top: 5px;padding-bottom: 5px;font-weight: bold;width:10%;'>
JCR-VIS</td>
<td width="10%" RsCode='35' class='GreyBorder' align="center">A</td>
<td width="10%" RsCode='' class='GreyBorder' align="center"></td>
<td align="center" style='display:none' class='GreyBorder'></td>
</tr>
</tbody>
</table><br />
What I have tried?
I have tried adding the following CSS: (it didn't work)
table { overflow: visible !important; }
thead { display: table-header-group !important; }
tr { page-break-inside: avoid !important; }
NOTE:
I repeat, the overlapping is not occurring when the table rows are cut off from page-break. It is ONLY overlapping when thead is cut off because of the page break. as shown in the image above.
Puppeteer version
1.19.0
Node.js version
v16.13.0
npm version
8.1.0
What operating system are you seeing the problem on?
Windows
I think I had the same issue. It is when you have a repeating table header (thead { display: table-header-group }) and the table breaks for printing between tr tags within thead. I couldn't find a way to do it with only the break-after, break-before or break-inside properties. This is a bit of a hack, but here is how I fixed it:
:root {
--header-height: 60px;
}
th {
break-inside: avoid;
}
thead th::after {
content: '';
display: block;
height: var(--header-height);
margin-bottom: -var(--header-height);
break-inside: avoid;
}
The height and negative margin-bottom are equal to the height of the tr elements below the first tr. In my code I just have 60px and -60px hard coded in, but I wanted to be clear that depending on the height of your table header that you will have to change those values. The height creates the size of element that can't be broken inside by a page break and the negative margin-bottom brings back up the table content so that it is not impacted by the existence of the pseudo-element. It essentially forces the header to be on the next page.
face the same problem.
You may put the content of <td> into <div> tag.

Show last table column on line hovering

In a centered table is the last column hidden.
On hovering over a specific line I want the table to show the last column of this single line.
This should be offering the ability to edit and delete (AJAX) the content/object of the line.
Here's a example:
https://jsfiddle.net/5x2wv160/1/
The problem is the changed size of the table so it is moving a little bit to the left.
My idea fixing this is to change the last column to
tr > td:last-child {
position: relative;
}
But what base element do I have to set the display-style too?
Does anyone have any better ideas?
Check this way of showing the last column on hover to <tr>
.action {
display: none;
}
tr:hover .action{
display: block;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content1</td>
<td>Content2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content5</td>
<td>Content6</td>
<td class="action">Edit</td>
</tr>
</tbody>
</table>
You can use visibility instead of dispay:none like this:
table {
margin: 0 auto;
}
tr > td:last-child {
visibility: hidden;
}
tr:hover > td:last-child {
visibility: visible;
}
You are on the right way. But how about only showing contents thus the hyperlink on hover. tr td a { display:none; } VS tr:hover td a{ display:block} so the content would not be moving left and right. Also setting standard widths for each table column would prevent that the columns are moving

change table column width

I'm using react library that constructs table in the following template:
<div class="table-container" style="width:100%">
<table style="width:100%">
<thead>
<tr>
<th>BLA_Column</th>
</tr>
</thead>
</table>
<table style="width:100%">
<tbody>
<tr>
<td>BLA_Body</td>
</tr>
</tbody>
</table>
</div>
I'm able to set the width of the th and the td to auto, but, the result is that I get two different sizes (one for the th and one for the td).
When I try to use the following selector (for example), nothing happens:
table > thead > th {
width: 100px;
}
Also when I try to change directly the width using the chrome dev-tools, there is no change at all.
Thanks ahead!
CSS character > select only direct childs. Change your CSS with :
table > thead th {
width: 100px;
}
or
table > thead > tr > th {
width: 100px;
}

Unable to keep the table column width fix with CSS colgroup

p {
width: 40px;
margin: 0;
padding: 0;
}
td {
padding: 0;
margin: 0;
}
<table style="width:100px;">
<colgroup>
<col style="width:20px;">
<col style="width:40px;">
<col style="width:40px;">
</colgroup>
<tr>
<th>ID</th>
<th>NAME</th>
<th>Email</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>
<p>johntheman#example.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
sadddddddddddddddddddddddddd
</p>
</td>
</tr>
</tbody>
</table>
I have simple table with fix width. I also have fix width for columns in it to do that I have used CSS colgroup.
Problem 1:
Width of my columns if I check in developer's tool is different than that of what I have given in colgroup.
What I have tried
While fixing it I have found that the width changes with the text in it if I increase the text td increases and vice versa.
Problem 2:
When I enter the text in td unless I don't break it on new line by hitting enter the width of td goes on increasing with text.
What I have tried
To tackle this problem I have wrap my text in a p tag with fix width and then put it in td but still no luck. What I see is width is getting applied to P tag but text is overflowing.
What I expect :
I would like to know that why text is not breaking itself on new line after the fixed width of td. Why text overflows out of P even after fix width? Why td has to increase even after fix width?
I don't know what I am missing to apply here.
for the table use css property
table-layout: fixed;
Then provide fixed with to your td columns.
The width of the <p> tag and <td> are fixed they are not increasing.
Until there is no space in your text content it will not wrap to next line. You have to use ellipsis which will put ... in place of overflowing text content. Use below css for your <p> tag.
p {
width: 40px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
}

Produce horizontal scroll for table 'tbody'

I have a traditional table with thead, tbody,etc. This is necessary for tablesorter.js.
What I have:
<div id="tableWrapper">
<div id="tableContainer" class="tableContainer">
<table id="scrollTable">
<thead class="fixedHeader">
<tr class="tableHeader even">
<th class="header">
<span>Name</span>
</th>
<th class="header">
<span>Address</span>
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="tableRow">
<td class="td_0">
<span>
Doe, John
</span>
</td>
<td class="td_0">
<span>
Memory Lane
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
#tableWrapper tbody{
color:#00467f;
font-weight:500;
position:absolute;
overflow-y: auto;
overflow-x: scroll;
height:300px;
width:300px;
}
#tableWrapper #tableContainer{
width: 1100px;
overflow: hidden;
}
#tableWrapper tbody>tr{
width: 1200px;
}
I am keeping the table header section vertically fixed, so tbody position is absolute to keep the table header outside the tbody vertical scroll event. I tried setting the width of the tbody>tr to something higher than the tbody but no luck.
The tbody>tr width automatically shrinks to the size of the tbody.
Problem: I can't get the tbody horizontal scrollbar to scroll without horizontally scrolling the entire table, (thus the vertical scrollbar would disappear into the overflow:hidden). I want to just scroll the tbody horizontally and then I have some jquery to bind that event to the header. So no issue there. Just trying to get the horizontal scrollbar to scroll for tbody only.
I am able to get the tbody overflow-y:auto to work, but not overflow-x:auto. Is there a way to make the tr wider to get the tbody to scroll left and right? If so, how?
Ah I figured it out.
I added float:left; and display:block to the tbody>tr.
CSS:
#tableWrapper tbody>tr{
display:block;
float:left;
width: 1200px; /*desired width*/
}

Categories