Hello I am designing a page and my client wants an image to appear when you hover over one of the rows in a table. We don't want the image to appear inside the table, just floating above it. I am not sure how much code I should supply here:
<div class="tg-wrap"><table id="tg-VGIE9" class="tg">
<tr>
<th class="tg-yw4l">Item #</th>
<th class="tg-yw4l">Product Family</th>
<th class="tg-yw4l">Item Description</th>
<th class="tg-yw4l">Price</th>
</tr>
<tr>
<td class="tg-yw4l">161129-1</td>
<td class="tg-yw4l">Accessory</td>
<td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td>
<td class="tg-yw4l">$189.94</td>
</tr>
</table></div>
So when you rollover anything from 161129-1 to the price, the image would appear above.
Thank you for your help!
Using CSS to make something appear above the thing you're hovering, since you can't traverse up the DOM in CSS and can only traverse down, you can use flexbox with order to visually re-position things while still keeping the element after the element you're hovering.
But if you're hovering over one thing, and you want something that came before that thing to be displayed on hover, javascript is probably a better solution.
* {margin:0;}
tbody {
display: flex;
flex-direction: column;
}
.img {
display: none;
order: -1;
}
tr:hover + .img, tr:hover {
display: flex;
}
<div class="tg-wrap">
<table id="tg-VGIE9" class="tg">
<tbody>
<tr>
<th class="tg-yw4l">Item #</th>
<th class="tg-yw4l">Product Family</th>
<th class="tg-yw4l">Item Description</th>
<th class="tg-yw4l">Price</th>
</tr>
<tr>
<td class="tg-yw4l">161129-1</td>
<td class="tg-yw4l">Accessory</td>
<td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td>
<td class="tg-yw4l">$189.94</td>
</tr>
<tr class="img">
<td colspan="4">
<figure>
<img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg">
</figure>
</td>
</tr>
<tr>
<td class="tg-yw4l">161129-1</td>
<td class="tg-yw4l">Accessory</td>
<td class="tg-yw4l">3010-0289FG, CI-3 CABLE ASSEMBLY</td>
<td class="tg-yw4l">$189.94</td>
</tr>
<tr class="img">
<td colspan="4">
<figure>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</figure>
</td>
</tr>
</tbody>
</table>
</div>
Related
I have a table which has a vertical and horizontal title ("Initial Gravity" and "Final Gravity" respectively), I have a hover effect on my elements, but what I would really like is for my hover to intersect in a manner similar to that shown in the image.
I've used red rectangles in the image purely for representation purposes, I'm hoping to use the same hover as is seen on the hovered element, so the result I'm looking to achieve is a purple bar across the row and a purple bar down the column intersecting on the element the user is hovering over.
If code is needed to help get help, please let me know what code you need to see. The table is a monster at 56 rows and 28 cols so not sure if I should add the entire code or just a snippet.
.card-body table{
width:100%;
}
.blank-cell, th{
background: #000;
color: #fff;
}
td {
text-align: center;
}
th{
background: #000;
color: #fff;
}
td:hover {
background: #530288;
color:white;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th>
<div><strong>Final Gravity</strong></div>
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="row-2">
<td class="blank-cell"></td>
<td class="tooltip"></td>
<td class="tooltip">0.990</td>
<td class="tooltip">0.992</td>
<td class="tooltip">0.994</td>
</tr>
<tr class="row-3">
<td class="blank-cell"><strong>Initial Gravity</strong></td>
<td class="tooltip">1.020</td>
<td class="tooltip">3.9</td>
<td class="tooltip">3.7</td>
<td class="tooltip">3.4</td>
</tr>
<tr class="row-4">
<td class="blank-cell"></td>
<td class="tooltip">1.022</td>
<td class="tooltip">4.2</td>
<td class="tooltip">3.9</td>
<td class="tooltip">3.7</td>
</tr>
<tr class="row-5">
<td class="blank-cell"></td>
<td class="tooltip">1.024</td>
<td class="tooltip">4.5</td>
<td class="tooltip">4.2</td>
<td class="tooltip">3.9</td>
</tr>
</tbody>
</table>
I am using bootstrap 5.
I have a table and I need to display four images side by side. This seems to work on a large screen:
However, on a phone the images are shrunken and no longer visible:
How can I force the images to remain at least 16px even on phone screens? The table will have a horizontal scroll but that is ok.
Is there a better way to display 4 img tags in one td and force all of them to be on the same line? The only way I found to do it is by putting them in row and col divs.
Code:
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Username</th>
<th scope="col">Match Predictions Made</th>
<th scope="col">Winner</th>
<th scope="col">Finals</th>
<th scope="col">Top 4</th>
<th scope="col">Points</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Marcipanas</th>
<td>5/36</td>
<td><img src="assets/flags/be.svg" class=" float-start flag-img" alt="be"></td>
<td>
<div class="row">
<div class="col"><img src="assets/flags/it.svg" class="flag-img" alt="it"></div>
<div class="col"><img src="assets/flags/cz.svg" class="flag-img" alt="cz"></div>
</div>
</td>
<td>
<div class="row">
<div class="col"><img src="assets/flags/be.svg" class="flag-img" alt="be"></div>
<div class="col"><img src="assets/flags/dk.svg" class="flag-img" alt="dk"></div>
<div class="col"><img src="assets/flags/fi.svg" class="flag-img" alt="fi"></div>
<div class="col"><img src="assets/flags/ru.svg" class="flag-img" alt="ru"></div>
</div>
</td>
<td>0</td>
</tr>
<tr>
<th scope="row">test3</th>
<td>0/36</td>
<td><img src="assets/flags/it.svg" class=" float-start flag-img" alt="it"></td>
<td class="text-muted">No prediction</td>
<td class="text-muted">No prediction</td>
<td>0</td>
</tr>
<tr>
<th scope="row">testing1</th>
<td>1/36</td>
<td class="text-muted">No prediction</td>
<td class="text-muted">No prediction</td>
<td class="text-muted">No prediction</td>
<td>0</td>
</tr>
<tr>
<th scope="row">test2</th>
<td>0/36</td>
<td class="text-muted">No prediction</td>
<td class="text-muted">No prediction</td>
<td class="text-muted">No prediction</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
EDIT
As John suggested bellow I tried to add nowrap instead of using row-col but that seems to have forced everything into separate lines.
Code:
<td>
<div class="no-wrap">
<img src="assets/flags/be.svg" class="flag-img" alt="be">
<img src="assets/flags/dk.svg" class="flag-img" alt="dk">
<img src="assets/flags/fi.svg" class="flag-img" alt="fi">
<img src="assets/flags/ru.svg" class="flag-img" alt="ru">
</div>
</td>
css:
.flag-img {
max-height: 32px;
min-height: 16px;
min-width: 16px;
}
.no-wrap {
flex-wrap: nowrap !important;
}
Image of results:
So bootstrap defaults .row to have flex-wrap: wrap; You can add this to your CSS for force it to stop wrapping:
.row {
flex-wrap: nowrap !important;
}
Though I'd might consider adding a new class to each row with the images and calling that class instead of just outright .row incase there are areas where you want it to wrap. But this code will work.
As for the shrinking issue, if you want your pictures to never be smaller than 16px you can add this code to your CSS:
.flag-img {
min-width: 16px;
}
I am using the CSS framework Foundation for Email to create a responsive email template. My email design has tiles stacked next to each other, but I can't create the gap between each other using raw Foundation.
My hacky solution involves using css property border to create the visual gaps between the tiles. I am wondering if there is a better solution that what I have tried.
My code at CodePen has two tables. The first table is the table I would like to fix without using any hacky solutions. My second fix involves applying the border css property to visually create the desired gap.
I am looking for a solution that where I don't need to do any hacky solutions like what I've done for the second table.
Desired look: https://imgur.com/a/CiyUUs3
Code: https://codepen.io/anon/pen/qYzGEN
border is not a bad way to go. It's widely supported by email clients and it since you're using it as a style sheet, it can be adjusted depending on the size of the email width through #media queries. The only better way might be <table cellspacing="10"> to force a space between the tables.
The drawback to what you are doinf is that Outlook only has partial support background-color The same with Android. So in some email clients you're not going to have have a white background. My suggestion is to incorporate a 1px border around each table cell style="border: 1px solid #333333;" for differentiation.
<table class="row" cellspacing="10" border="1">
<tr>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 3</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 4</td>
<td class="small-12 large-4 tile hack" style="border: 1px solid #333;">Tile 5</td>
</tr>
</table>
I hope that gives you some ideas.
Good luck.
If you don't want to use border then strap yourself in for a very busy looking document. One of the reasons I don't like bootstrap-like frameworks, your at the mercy of a hundred different inline classes.
Foundation 2.2 describes columns for tables as such:
At the top level, a column is a <th> with the class .columns.
Inside of the <th> is another full table. The content of your column goes inside of a <th>. Right below that table header should be another <th> with a class of .expander. This empty element helps the column expand to be full-width on small screens.
Essentially saying, your going to be doing a lot of nesting. The structure will resemble something like this according to Foundation 2.2:
<th class="columns">
<table>
<tr>
<th>CONTENT HERE</th>
<th class="expander"></th>
</tr>
</table>
</th>
...repeat...
However, in your particular circumstance, you need to wrap them in a row because Foundation rows handle columns:
A row is a <table> with a <tbody> and <tr>. Inside of this <tr>, you'll place each individual column. The <table> also has the class .row.
So you get the point, more nesting unfortunately. To answer the question specifically using what I think is the structure Foundation has documented, you would need to make 1 row for each level. Meaning Tile 1&2 have their own row, Tile 3&4&5 have their own and so forth. This gives you the flexibility of the rest of their inline styling classes and aligning classes since you'll be doing it the 'Foundation' way, whatever that means.
Now when testing this, I didn't see any adverse complications while omitting the .expander class, but since they recommend using it, I would just use it per their guidelines.
Here is a revised codepen snippet: https://codepen.io/anon/pen/BxgXJZ
The revision I made is highlighted in red to show boundaries and white to show content for a quick visual aide. Styling and aligning I'll leave up to the scope of your project. This is responsive friendly as your's included classes for it too.
In the case of link-rot, here is the code snippet:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 1</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns">
<table>
<tr>
<th>TILE 2</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 3</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 4</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 5</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-8 columns" >
<table>
<tr>
<th>TILE 6</th>
<th class="expander"></th>
</tr>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tr>
<th>TILE 7</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If you don't want to go with borders, below is an example of how the code will look, basically a lot of tables nested into 1.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="49%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="49%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="66%" bgcolor="#000000"> </td>
<td width="20"> </td>
<td width="32%" bgcolor="#000000"> </td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
Hope this gives you an idea of how to your result will look (code view).
I need to add a display block to my tbody in order to make my page-break-inside working.
When I do that, the page break works on printing, but the table's shape is modified for one specific tbody.
html:
<div class="row section-content">
<table>
<tbody class="subsection">
<tr>
<th colspan="2">Personal infos</th>
</tr>
<tr class="check">
<td class="control-title">Is licensed</td>
<td class="check-body control-body">false</td>
</tr>
<tr class="text">
<td class="control-title">First name</td>
<td class="text-body control-body"> Gc yt?tv</td>
</tr>
<tr class="text">
<td class="control-title">Last name</td>
<td class="text-body control-body">Bhvug7y</td>
</tr>
<tr class="text">
<td class="control-title">Adress</td>
<td class="text-body control-body">Guvyb</td>
</tr>
<tr class="radioBtn">
<td class="control-title">Wants to suscribe to monthly discount</td>
<td class="radio-body control-body">No</td>
</tr>
<tr class="number">
<td class="control-title">Annual household income</td>
<td class="number-body control-body">10</td>
</tr>
</tbody>
<tbody class="subsection">
<tr>
<th colspan="2">Accomodation</th>
</tr>
<tr class="gps">
<td class="control-title">Location</td>
<td class="gps-body control-body">55.8755037, -4.2547716</td>
</tr>
<tr class="number">
<td class="control-title">Iso reference</td>
<td class="number-body control-body">15</td>
</tr>
<tr class="radioBtn">
<td class="control-title">Accomodation type</td>
<td class="radio-body control-body">House</td>
</tr>
</tbody>
</table>
</div>
Before:
]
After with display block:
After struggling with the same issue for days, i found that using display:table-row-group works perfectly for this situation.
display:block will disconnect the element from the parent table, causing this issue.
display:table-row-group render the element just like a <tbody>, keeping the DOM correct.
reference: https://www.w3schools.com/jsref/prop_style_display.asp
I do had the same problem and after searching all over i found a solution for my problem which is, first add a class to table which you dont want to break while printing like unbreakable now add css
.unbreakable td{
width: 100% !important;
}
.unbreakable tr{
page-break-inside: avoid !important;
}
It worked fine for me hope it works for you too... :) Thanks...
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>