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
Related
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.
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;
}
I have a table that contains a column with an icon. I want the icons to be hidden by default, and only appear on hover.
HTML code:
<table class="table table-hover">
<tr>
<th>From</th>
<th>To</th>
<th>Connecting Airport</th>
<th>Comment</th>
<th>Report</th>
</tr>
<tr>
<td>JFK</td>
<td>CPH</td>
<td>ARN</td>
<td>N/A</td>
<td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
</tr>
<tr>
<td>SFO</td>
<td>EWR</td>
<td>ORD</td>
<td>N/A</td>
<td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
</tr>
</table>
Minimal Working Example:
https://jsfiddle.net/bce9a257/1/
There is no need to use javascript for this. Just a few lines of css will do:
i.fa {
display: none;
}
td:hover i.fa {
display: inline-block;
}
And the updated fiddle: https://jsfiddle.net/bce9a257/3/
If you want the icons to show on hover of a row in stead of a cell, you could do that like this:
i.fa {
display: none;
}
tr:hover i.fa {
display: inline-block;
}
update:
Obviously you'll need to make that selector a bit more specific to only target the icons in your table. You could for example add an id to your table like flights and change those selectors to #flights i.fa (and #flights tr:hover i.fa)
Bootply: http://www.bootply.com/N8lH48VBN7
I have rows where I want each row to expand to show additional rows but I'm having trouble getting rid of the whitespace even when the hidden row is not expanded. I think there might be a way to write a function in JS, but is there a faster and easier way to do this?
Also, when the collapsed rows are expanded, there is some whitespace, and I tried to change some properties of the div to no avail.
Bootstrap has a css style itself.
(so, if you want to apply your css style, you have to use '!important' keyword in your css.)
and, your code structure is not good as well.
therefore, it made a little space inside of each table row.
I think you want to do like this. :)
[RESULT] http://www.bootply.com/0QqWzFcwWo#
1. HTML Source
<div class="col-lg">
<div class="project" id="prodemo"></div>
<table class="table table-striped table-hover">
<thead align="center">
<tr>
<th width="1%"> </th>
<th width="24%">ID</th>
<th width="25%">Name</th>
<th width="25%">Phone</th>
<th width="25%">DOB</th>
</tr>
</thead>
<tbody>
<!-- [demo] -->
<tr class="prevent_drag" data-target="#demo" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo2] -->
<tr class="prevent_drag" data-target="#demo2" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo2" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo3] -->
<tr class="prevent_drag" data-target="#demo3" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo3" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
</tbody>
</table>
</div>
2. CSS source
.myOptions {
padding: 0 !important;
margin: 0 !important;
color: red;
}
.table th {
cursor:default;
}
.prevent_drag {
cursor:pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See this bootply
Just add this css and stay away from !important as other answers suggest.
.table>tbody>tr>td[colspan] {
padding: 0;
}
.table>tbody>tr>td[colspan] .table {
margin-bottom: 0;
}
Never use !important
Almost all answers here suggest to use !important. I think all of them need to read about CSS Specificity and stop using !important today.
...Or you could add this JS code:
$("td[colspan]").css("padding", "0");
$(".table").css("margin-bottom", "0");
Here is the Bootyply
Or can use pure CSS like this:
td[colspan]{
padding:0 !important;
}
.table{
margin-bottom:0 !important;
}
CSS Only Bootply
Use below code in css
tr td{padding: 0!important;}
Thanks With Regards
Remove padding-top and padding-bottom only from your collapsed rows. This padding is coming from bootstrap table style.
tr:not([data-toggle]) > td { padding-top: 0px; padding-bottom: 0px; }
Selecting the cells which are children of rows which do not carry an attribute called data-toggle.
There is margin in the nested table as well. You can remove that:
.table tr:not([data-toggle]) table,
.table tr:not([data-toggle]) td {
padding: 0; margin: 0px;
}
Use this CSS style
tr[data-toggle="collapse"] + tr td {
padding: 0 !important;
}
I have a general class that I use for table rows which changes the background-color of it's td 's when they are hovered. I'm using it all over my application.
.enty-table {
&:hover > td {
background-color: lightblue;
}
}
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Min Length</th>
<th>Max Length</th>
<th>Min Value</th>
<th>Max Value</th>
<th>Regular Expr</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr class="enty-table">
<!-- I want the hover on the folowing td to escape the hover effect added with enty-table class on tr -->
<td class="columnCategory">Business Fields</td>
<td><strong>new column1</strong></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr class="enty-table">
<td><strong>new column2</strong></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
Now, I have a special table (2 dimensional) where in the first column I have td 's with rowspan.
Eventually I want to get rid of background-color change when I hover the rowspan td:
When I hover on the Business Fields td the hover effect is applied for the new column1 row, but when I hover on the second row it is not applied on the td with rowspan. I'm want to fix that by removing the hover action from the first td.
How can I escape the hover effect on the rowspan td, but keep it for the table rows (the individual subrows - new column1 , new column2)?
Can it only be done from CSS?
You could use CSS :not() pseudo-class to ignore the <td> has rowspan attribute, then use CSS general sibling selectors to reset the background color of table cells, as follows:
.enty-table {
&:hover > td:not([rowspan]) {
background-color: lightblue;
}
& > td[rowspan]:hover ~ td {
background-color: #fff; /* Reset the background of next cells */
}
}
JSBin Demo.
Update
If using CSS :not() is not an option, you could reset the background-color of the first cell as follows:
.enty-table {
&:hover > td {
background-color: lightblue;
/* Reset the background color of td[rowspan] */
&[rowspan] {
background-color: #fff;
}
}
& > td[rowspan]:hover ~ td {
background-color: #fff; /* Reset the background */
}
}
JSBin Demo #2.
Basically what I need is when I hover that td there will be nothing applied on the tr
Actually, you're hovering the tr itself, not only that td (refers to td[rowspan])
Is it possible to go higher in the tree structure from CSS
CSS is cascading, there's no backward and/or parent selector (yet).
As a Pure CSS way, you could use pointer-events: none; on the td[rowspan] to prevent from triggering the mouse event on that element.
Working Demo #3.
Otherwise, you need to use JavaScript to change all table-cells on hovering each one excluding td[rowspan].
For instance:
$('.enty-table').children('td:not(td[rowspan])').hover(function() {
$(this).siblings(':not(td[rowspan])').addBack().addClass('hover');
}, function() {
$(this).parent().children('td').removeClass('hover');
});
Working Demo #4.
A couple of things you could do:
.enty-table {
& td:hover {
background-color: lightgrey;
}
}
.enty-table {
& tr:hover {
background-color: lightgrey;
}
}
Please try it. Use class tree and change style using selected object. It will work fine for all "TD"s using proper tree pattern.
$(document).ready(function(){
$(".enty-table tr td").hover(function(){
$(this).css("background-color","yellow");
});
$(".enty-table tr td").mouseout(function(){
$(this).css("background-color","lightgray");
});
});
http://jsfiddle.net/vDD5p/