I'm trying to get this table in front of this image and it just doesn't happen, I know the table isn't that good its just an example!
HTML
<section>
<div class="image-wrapper">
<img src="img/animesea.png" alt="animeb-image" class="picimage">
<table>
<tr>
<td>a</td>
</tr>
</table>
</div>
</section>
Thanks
I would place the image as a background-image like #SVK suggested.
Here is another option. Wrap the img tag and the table tag in separate divs and apply position: absolute on both.
jsFiddle
You could also use z-index and positioning. jsFiddle. It's not clear exactly what you want to achieve, but based on what you've asked I would apply the image as a background like #SVK said.
You can use css style so background image will be adjusted all the time with table size.
There is code :
.tableBckImg
{
background:url(http://www.placehold.it/300x300);
background-repeat:no-repeat;
background-size:100% 100%;
}
<table cellspacing="0" cellpadding="0" border="0" class="tableBckImg">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
You can change number of rows and columns and see how background image expand or shrink, here, in fiddle example
In this example, background image is 300x300 px.
Check it out.You will get some idea.
<!DOCTYPE>
<html>
<style>
.image-wrapper
{
width:650px;
height:488px;
background: url("http://stuffpoint.com/sea-and-beach/image/56782-sea-and-beach-anime-sea-pic.jpg") no-repeat;
background-size:contain;
padding:5px;
margin:auto;
}
table
{
width:650px;
height:150px;
border:2px solid yellow;
color:white;
background-color:rgba(0,0,0,0.5);
text-align:center;
padding:2px;
}
th
{
border:1px solid yellow;
color:white;
font-size:20px;
}
td
{
border:1px solid yellow;
color:white;
}
</style>
<body>
<section>
<div class="image-wrapper">
<table>
<th colspan='3'>Person name and age</th>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Age</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>54</td>
</tr>
<tr>
<td>John</td>
<td>smith</td>
<td>74</td>
</tr>
</table>
</div>
</section>
</body>
</html>
Related
I'm trying to imitate (in a simple way) the style of this page:
http://www.smoolis.com/screen/pricing/language/en
Essentially, I'm aiming to create three tables with product images on top, where the background color behind each of the three images changes slightly on hover in a fade effect.
I'm able to find quite a lot of examples of images changing, but few with the background color of a div - do you have an example of this working?
My WIP code is available here, though it has two issues:
1) I would like to add three different background-colors behind the 3 images
2) I would ideally not want the images to fade, but rather the background colors
3) I'd like the background colors to fade independently - e.g. now the images fade all at the same time
Any help would be super appreciated!
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.8;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>
To address your three questions:
In their current form background colors cannot be added to these images as they already have a white background. If you would like to adjust the background color of these images you would need to remove the background in a photo editing program.
If you did use images with a transparent background then the following would allow you to fade the background of the images.
.container .image {
background-color:blue;
transition:background-color 1s;
}
.container .image:hover {
background-color:LightBlue;
}
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
<div class=container>
<img class="image" src="https://www.drupal.org/files/issues/test-transparent-background.png">
</div>
A simple test of your example code shows that at least in my case, the images do fade separately.
Also, in my example of how you would do this with a transparent image, I put the hover property on the image rather than the container. If you would rather the fading function in the same way as your example, the line can be changed to .container:hover .image.
You need to set color:#xxxxxx independently. And your image background is in the front of "background" named container you need a .PNG, so the background will be visible.
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border-bottom: 1px solid #ddd;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.container {
position: relative;
width: 50%;
}
.container:hover .image {
opacity: 0.7;
}
.container.color1:hover {
background-color:#51c2bc;
}
.container.color2:hover {
background-color:#35a9d2;
}
.container.color3:hover {
background-color:#007cab;
}
</style>
<div id="columns">
<div class="one-third">
<div class="container color1">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third">
<div class="container color2">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
<div class="one-third-last">
<div class="container color3">
<img src="http://mikemoir.com/mikemoir/wp-content/uploads/2015/06/MedRes_Product-presentation-2.jpg" alt="Avatar" class="image">
<div class="overlay"></div></div>
<table>
<tbody><tr>
<th>Firstname</th>
</tr>
<tr>
<td>Peter</td>
</tr>
<tr>
<td>Lois</td>
</tr>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Cleveland</td>
</tr>
</tbody></table>
</div>
</div>
I am currently using EvoPDF (HTML to PDF) to build up a report in C#.
In this report we have a table, looking something like this in the fiddle:
http://jsfiddle.net/bk48srw1/3/
with the important part:
<tr>
<td>label for something</td>
<td style="position:relative;" rowspan="99999">
<div id="absolute">
<div class="centerd">
<span>value for all</span>
</div>
</div>
</td>
</tr>
The idea is that there are a variety of products, but they will have the same value in the second column, hence:
rowspan="99999"
The client wants the styling (border and background) to span the height of the second column, with the text in the middle. I have tried the position absolute, display:table, as well as vertical-align.
I cannot use a solution like Vertically align text in a span with fixed width and height
because I have no idea what the height would be (there could be an arbitrary number of tr's)
How do I make the div 100% height of the td, with the text displaying in the middle?
My preference is not to use JS, seeing that this code doesn't see a browser at all.
For styling purposes, I need to have about 3px padding inbetween the td and the div, seeing that I cannot add cellspacing to only 1 td.
Used to this change your html as like this
td{
width:50%;vertical-align:middle;
}
<table style="width:100% ">
<tr>
<td>
<table>
<tr><td>label for something</td></tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
<tr>
<td>label for this:</td>
</tr>
</table>
</td>
<td style="background:yellow; border: 1px solid black;text-align:center;">
<table width="100%">
<tr><td>value for all</td></tr>
</table>
</td>
</tr>
</table>
Here you go: http://jsfiddle.net/sjncndvn/2/
HTML markup:
<table style="width:100% ">
<tr>
<td>label for something</td>
<td style="position:relative;" rowspan="99999">
<div id="absolute">
<div class="centerd">
<span>value for all</span>
</div>
</div>
</td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
<tr>
<td>label for this:</td>
<td></td>
</tr>
</table>
CSS:
td{
width:50%;
display:table-cell ;
vertical-align:middle ;
}
#absolute {
width:100%;
background:yellow;
display:table;
border: 1px solid black;
}
.centerd {
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#pink;
}
Since #absolute no longer uses absolute positioning, you may want to change the ID name to something else.
I was wondering if it is possible to have the table embedded inside the td to have the same height as the td.
<table>
<tr>
<td style="background:red">
<table style="background:blue">
<tr>
<td>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
Here is the jsfiddle... https://jsfiddle.net/ekh6z8w0/
As you can see through the fiddle the embedded table is off by a pixel or two. Is it possible to have the blue inside overlap the slight red border?
Remove the padding from td, should work.
td{
padding:0;
}
You can try like this: Demo
CSS:
table>td, table>td>table {
padding:0;
margin:0;
}
table table {
padding:0;
margin:0;
height:100%;
border:1px solid red;
background-color:blue;
color:#fff;
}
HTML:
<table>
<tr>
<td>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</td>
</tr>
</table>
Hope this is what you want.
how to give css for getting the page as follows in the same div. am having the data in the following way with more sub parts as in the second phase.
abcde
a production productions
limited
total
jackson
b productions productions
limited
the code am using is as follwos.
css
.label_left21 {
width: 20%;
float: left;
text-align:center;
line-height: 30px;
margin:0 10px 0 0;
word-wrap:break-word;
}
.text_right22 {
width: 20%;
float:left;
text-align:center;
}
.text_right23 {
width: 55%;
float:left;
}
html as
<div class="label_left21"><br><br><br><label>BUDGET</label></div>
<div class="text_right22"><br><br><br><label>PUBLIC</label></div>
<div class="text_right23"><label>State</label></div>
<div class="text_right22"><br><br><br><label>PRIVATE</label></div>
<div class="text_right23"><br><label>publication</label></div>
but it is not working the data is clashing if there are more sub parts
it would be easier if you use tables with rowspan ..and css can be used to adjust the width and margins of the cells here is the code
<!DOCTYPE html>
<html>
<body>
<table >
<tr>
<td rowspan="9">total</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>abcde</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
<tr>
<td rowspan="4">a production</td>
</tr>
<tr>
<td>jackson</td>
</tr>
<tr>
<td>productions</td>
</tr>
<tr>
<td>limited</td>
</tr>
</table>
</body>
</html>
I am struggling with this problem for quite a while now and can't find a proper solution to my problem.
What I have:
<div style="width:150px; border:1px solid #000;overflow: auto;">
<div>SOME TEXT</div>
<table style="width:100%; border:1px solid #0F0;">
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
</tr>
<tr>
<td colspan="3">
<div style="overflow: auto; border:1px solid #F00;">
<table>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
http://jsfiddle.net/37ExS/
Explanation:
The outer div represents my content wrapper with a fixed with, which contains some other divs and a table with data.
Inside of the data table is a row, which contains another table with detailed data in reference to the row above it.
What I want:
The table cell, which currently has a colspan of "3", containing the detail table should have it's overflowing content creating a scrollbar. Which is why I wrapped the content in another div, but it seems like the div's width is determined by it's content, rather than by it's parents (TD) width. setting a fixed width for the inner div works, but I want it dynamically, since I really don't know the width of the content wrapper.
I hope that was understandable.
UPDATE:
This is how it should behave:
http://jsfiddle.net/eRA33/
I could use that and be fine about it, but I really don't know the cross-browser support and it looks a bit hacky to me, would be nice, if someone has a nicer way of doing that.
The problem is that you can't use the overflow property on the table element. A nicer way of doing it (in my opinion), is to add tbody tags and set them as display: block. This lets them scroll. This also avoids using a bunch of wrapper divs.
Don't worry about using table-layout; it's well supported.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Here's a small fiddle to demonstrate. I put your styles in the style section, as it was easier for me to work that way :)
http://jsfiddle.net/eRA33/2/
HTML
<div class="wrapper">
<div>SOME TEXT</div>
<table class="table-scroll table-data">
<tbody>
<tr>
<td>HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
<tr>
<td colspan="4">
<table class="table-scroll table-detail">
<tbody>
<tr>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
<td>HEAD</td>
</tr>
<tr>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
<td>QQQQ</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
CSS
.wrapper {
width:180px;
border:1px solid #000;
}
.table-scroll {
width:100%;
table-layout: fixed;
}
.table-scroll tbody {
display:block;
overflow:scroll;
}
.table-data {
border:1px solid #0F0;
}
.table-detail {
border:1px solid #F00;
}