On my html , I'm trying to give rowspan=2 to my td. The issue is that the td don't go down and take the row. May be I miss something?
I tried to add more tr and td but it's still not good. Maybe I need to add something?
UPDATE
added my css.
module.exports = (data) => {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
width: 90%;
padding: 0 10px;
margin: 0px;
min-height: 1350px;
background-color: #fff;
}
.pageWrapper {
position: relative;
width: 100%;
direction: rtl;
padding: 0 15px;
}
.header {
position: relative;
width: 100%;
}
.header img {
display: block;
width: 350px;
/* height: 120px; */
margin: 0 auto;
padding: 0;
border:0 none !important;
background-color: transparent !important;
}
.header h1,
.header h2 {
text-align: center;
display: block;
}
.header h1 {
font-size: 1.5rem;
}
.header h2 {
font-size: 1rem;
}
h3 {
background-color: #D3D3D3;
}
table {
width: 100%;
display: block;
// border-collapse: collapse;
margin: 0 auto;
background-color: #fff;
margin: 0;
}
table.newPage {
margin-top: 10px;
}
tbody,
tr,
th,
thead {
width: 100%;
display: block;
}
tr {
display: block;
}
tbody {
border: 1px solid #2c2b7d;
}
thead {
background-color: #2c2b7d;
color: #fff;
}
th {
padding: 4px;
}
tbody th {
text-align: right;
padding: 2px;
border-top: 1px solid #2c2b7d;
color: #2c2b7d;
text-decoration: underline;
font-size: 0.9rem;
}
td {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-height: 33px;
border-left: 1px solid #2c2b7d;
border-bottom: 1px solid #2c2b7d;
}
td:not(:first-child) {
margin-right: -5px;
}
td:last-child {
border-left: none;
}
td.col-1 {
width: 8.33333333%;
}
td.col-1-nobroder {
width: 8.33333333%;
border-bottom : none;
}
td.col-2 {
width: 19.9%;
}
td.col-2-email-firstTb {
width: 39.75%;
}
td.col-2-email {
width: 31%;
padding-bottom: 3px;
}
td.col-2-email-noborder {
width: 31%;
padding-bottom: 3px;
border-bottom : none;
}
td.col-2-CoverNameAgent {
width: 34.90%;
}
td.col-2-rhisoynumber {
width: 14.5%;
}
td.col-2-rhisoynumber-noborder {
width: 14.5%;
border-bottom : none;
}
td.col-2-carkind {
width: 10.35%;
}
td.col-2-shildanumber {
width: 15%;
}
td.col-3-second-section {
width: 19.5%;
}
td.col-3 {
width: 25%;
}
td.col-4 {
width: 33.3333333333333%;
}
td.col-5 {
width: 41.6666666666667%;
}
td.col-6 {
width: 50%;
}
td.col-7 {
width: 58.3333333333333%;
}
td.col-8 {
width: 66.6666666666667%;
}
td.col-9 {
width: 75%;
}
td.col-10 {
width: 83.3333333333333%;
}
td.col-11 {
width: 91.6666666666667%;
}
td.col-12 {
width: 100%;
}
td span {
display: block;
width: 100%;
font-size: 0.7rem;
color: #2c2b7d;
font-weight: bold;
text-align: right;
padding-right: 3px;
white-space: nowrap
}
td p {
display: block;
/* position: absolute; */
/* top: 2px; */
/* right: 5px; */
font-size: 0.7rem;
text-align: center;
width: 100%;
color: #000;
white-space: nowrap;
/* background-color: #D3D3D3; */
}
td img {
display: block;
width: 100%;
position: absolute;
top: 0;
max-height: 29px;
}
td p.trems {
position: relative;
text-align: right;
width: 95%;
margin-bottom: 5px;
direction: rtl;
font-size: 0.6rem;
}
label {
font-size: 0.7rem;
position: relative;
top: -2px;
}
.checkbox {
width: 12px;
height: 12px;
position: reletive;
padding-right: 1px;
padding-bottom: 2px;
top: 30px;
right: 20px;
border-radius: 3px;
display: inline-block;
border: 1px solid #2c2b7d;
color: #2c2b7d;
font-size: 12px;
}
.first-section-border {
border: 2px solid black;
}
.section-border-small {
border: 2px solid black;
width: 20%;
height: 100%;
border-spacing: 0 margin-bottom: 20px;
}
.section-border {
border: 2px solid black;
width: 78%;
border-spacing: 0
}
.second-section-border {
border: 2px solid black;
width: 100%;
}
.small-font {
font-size: 9px;
text-align: center;
margin-bottom: 6px
}
.small-font-secTwo{
font-size: 9px;
text-align: center;
margin-bottom: 6px;
border-bottom : none;
}
.small-font-span {
font-size: 8px;
text-align: center;
}
.small-td {
width: 14%;
border-bottom : none;
}
.col-1-name-and-firma {
width: 12%;
}
.name-and-firma {
padding: 0;
// margin-bottom: 1px;
font-size: 11px;
}
.your-fault {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px;
text-align : center;
}
.your-fault-width {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px width: 12%;
}
.your-fault-bitohLemui {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px word-wrap:break-word;
}
input[type='checkbox'] {
/* Double-sized Checkboxes */
-webkit-transform: scale(1);
/* Safari and Chrome */
transform: scale(1);
margin-top: 1px;
margin-right: 5px;
}
.margin-top {
margin-top: 1px;
}
.col-1-ishurEhagastTviaa {
width: 50%;
border-bottom: none;
}
.col-2-thiurKlali {
height: 50px;
}
.signAndDate {
width: 20%;
text-align: right;
border: none;
}
.signAndDateFont {
font-size: 15px;
}
.width20point4 {
width: 20.4%;
}
</style>
</head>
<body>
<div class="pageWrapper">
<!-- Part 4 -->
<table class="first-section-border">
<table>
<tbody>
<tr>
<td style="width: 20%; ">1,1</td>
<td style="width: 20%;">1,2</td>
<td style="width: 20%; ">1,3</td>
<td rowspan=2 style="width: 20%;">1-2,4</td>
<td rowspan=2 style="width: 20%;">1-2,4</td>
</tr>
<tr >
<td style="width: 20%; ">2,1</td>
<td style="width: 20%; ">2,2</td>
<td style="width: 20%; ">2,3</td>
</tr>
</tbody>
</table>
<img src="file:///C:/Users/User/Desktop/htmlIWithPdf/assets/bth.jpg" >
</div>
</body>
</html>
`
}
1st: You need use <tr> tag for conclude the first block of <td> tags (a columns must be inside a row).
2nd: The amount of columns in each row in the table must be equal (argument rowspan="2" of <td> (e.g. <td rowspan="2">...</td>) tag means "minus one column in the next row under this cell").
--- UPDATE 1 ---
Generally, <table>...</table> has syntax (in common view):
<table>
<thead> <!-- Header section -->
<tr>
<th>Column 1 title</th>
<th>Column 2 title</th>
...
<th>Column N title</th>
</tr>
</thead>
<tbody> <!-- Body of table -->
<tr>
<td>Cell (row 1 col 1)</td>
<td>Cell (row 1 col 2)</td>
...
<td>Cell (row 1 col N)</td>
</tr>
...
<tr>
<td>Cell (row M col 1)</td>
<td>Cell (row M col 2)</td>
...
<td>Cell (row M col N)</td>
</tr>
</tbody>
<tfoot> <!-- Table footer -->
<tr>
<td>Col.1 footer</td>
<td>Col.2 footer</td>
...
<td>Col.N footer</td>
</tr>
</tfoot>
</table>
Of course you can exclude any section with all its elements.
--- END OF UPD.1 ---
Use this for example:
<!DOCTYPTE html>
<html>
<head>
<style>
table {
border: 1px solid #000;
}
td {
border: 1px dotted #00F;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td style="width: 13%; ">1,1</td>
<td style="width: 14.5%;">1,2</td>
<td style="width: 13%; ">1,3</td>
<td rowspan=2 style="width: 29%;">1-2,4</td>
<td rowspan=2 style="width: 30.5%; ">1-2,5</td>
</tr>
<tr>
<td style="width: 40.5%; margin-right : 0.3px;">2,1</td>
<td style="width: 40.5%; margin-right : 0.3px;">2,2</td>
<td style="width: 40.5%; margin-right : 0.3px;">2,3</td>
</tr>
</tbody>
</table>
</body>
</html>
--- UPDATE 2 ---
After you update your code, I think the issue is caused by styles inside the <style>...</style> (without them all is right). Are you sure you need to reverse the order of columns by CSS? Maybe more easy way is to put to the columns values in reverse order to the table instead of using a lot of amout of styles?
Try to remove unwanted styles or rewrite them.
P.S.: I hope I correctly understood the essence of your question and was able to provide the necessary advice.
--- END OF UPD.2 ---
Related
I was trying out this demo to help optimize some tables on a site I'm developing.
Demo works great on my desktop when I resize with a responsive tester extension for chrome:
When loading on my phone it displays everything inline and if more data is added it just spills out:
Anyone have any idea?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
</style>
</head>
<body>
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
</tr>
</tbody>
</table>
</body>
Could you please check how https://codepen.io/panchroma/pen/YzGEJPd looks for you?
The only changes I made were adding the doctype and upping the #media breakpoint to 950px
Good luck!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 950px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
</style>
</head>
I'm trying to make a small table which can scroll when there are many tr tags under the headers. I have managed to get it to work correctly with just one column but I am struggling to get it to work with more than one column as the columns do not align. It is important that the size of the table stay what it is since I am adding new rows using jQuery and auto scrolling.
I just want the columns of the thead and tbody to align...
Here is what I have so far:
.grid_background_comm {
background-color: rgb(173, 173, 173);
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 950px;
height: 90px;
}
.grid_background_comm thead {
display: block;
text-align: left;
width: 950px;
}
.grid_background_comm th {
padding-left: 4px;
width: 950px;
}
.grid_comm {
display: block;
overflow-y: auto;
overflow-x: hidden;
text-align: left;
width: 950px;
height: 85px;
}
.grid_comm tr {
background-color: rgb(231, 231, 231);
display: block;
width: 935px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
padding-right: 4px;
}
.grid_header {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(44, 44, 44);
padding: 0px;
margin: 0px;
width: 960px;
height: 20px;
}
<table id="table_comm" class="grid_background_comm">
<thead>
<th id="1" class='grid_header'>Line</th>
<th id="2" class='grid_header'>I/O</th>
</thead>
<tbody id="gv_comm_data" class="grid_comm">
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
</tbody>
</table>
The display:block is attached to thead and tr which is affecting their default behaviour. You could remove them
https://codepen.io/rohinikumar4073/pen/zYGKqZL
.grid_background_comm {
background-color: rgb(173, 173, 173);
padding: 0px;
margin-left: 10px;
margin-right: 10px;
width: 950px;
height: 90px;
}
.grid_background_comm thead {
text-align: left;
width: 950px;
}
.grid_background_comm th {
padding-left: 4px;
width: 950px;
}
.grid_comm {
overflow-y: auto;
overflow-x: hidden;
text-align: left;
width: 950px;
height: 85px;
}
.grid_comm tr {
background-color: rgb(231, 231, 231);
width: 935px;
margin-left: 3px;
margin-right: 10px;
padding-left: 4px;
padding-right: 4px;
}
.grid_header {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(44, 44, 44);
padding: 0px;
margin: 0px;
width: 960px;
height: 20px;
}
<table id="table_comm" class="grid_background_comm">
<thead>
<tr>
<th id="1" class='grid_header'>Line</th>
<th id="2" class='grid_header'>I/O</th>
</tr>
</thead>
<tbody id="gv_comm_data" class="grid_comm">
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
<tr>
<td headers="1">01</td>
<td headers="2">02</td>
</tr>
</tbody>
</table>
I have an image icon inside my input, that's working fine.
The problem is that the icon is pushing my other input down. As you can see, after fade out, the input come back to desired position.
Is this a CSS issue? How can I solve this?
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: relative;
/* adjust as you need */
left: 190px;
bottom: 27px;
}
table {
border: 1px solid red;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
Follow-up to my comment about just setting the background of the input...
.input-test {
background-image: url('https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png');
background-repeat: no-repeat;
background-position: 99% 48%;
background-size: 24px 24px;
}
basically, you can set the image position as absolute so that the wrapper will ignore the image height. Additionally, you have to set the wrapper position as relative so that the image position (bottom, and left) will depend on it's wrapper.
Last thing, just adjust the image position as you see fit.
I hope that makes sense for you
EDIT: to make it more clear, I only changed this much.
#input_img {
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table td {
position: relative;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table {
border: 1px solid red;
}
table td {
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
In table-cell the default vertical alignment is middle, you can reset that by adding:
td {
vertical-align: top;
}
It would be better to set position: absolute; on the image, so it will be out of the normal content flow, and won't affect your standard layout, also easier to control the offsets.
td {
vertical-align: top;
position: relative;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
table {
border: 1px solid red;
}
td {
vertical-align: top;
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
change this in your css should be work:
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
td {
vertical-align: top;
position: relative;
}
My html code is
<tr>
<td><input type="image" style="height:25px; width:25px;" src="plus.png"></td>
</tr>
The cell is being created but image is not showing. However, if I use img tag, it is showing, so no problem with image's src.
EDIT: The CSS linked maybe the problem, but cannot figure out what:-
*{
font-family: Arial, sans;
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
h1 {
margin: 1em 0;
text-align: center;
}
#container {
margin: 0 auto;
width: 50%;
}
#container input {
height: 2.5em;
visibility: hidden;
}
#container label {
background: #f9f9f9;
border-radius: 1em 1em 0 0;
color: #888;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
height: 2.5em;
line-height: 2.5em;
margin-right: .25em;
padding: 0 1.5em;
text-align: center;
}
#container input:hover + label {
background: #ddd;
color: #666;
}
#container input:checked + label {
background: #DBF3FD;
color: #444;
position: relative;
z-index: 6;
/*
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
*/
}
#content {
background: #DBF3FD;
border-radius: 0 .25em .25em .25em;
min-height: 18em;
position: relative;
width: 100%;
z-index: 5;
}
#content div {
opacity: 0;
padding: 1.5em;
position: absolute;
z-index: -100;
}
#content-1 p {
clear: both;
margin-bottom: 1em;
}
#content-1 p.last {
margin-bottom: 0;
}
#content-2 p {
float: left;
width: 48.5%;
}
#content-2 p.column-right {
margin-left: 3%;
}
#content-3 p {
float: left;
width: 48.5%;
}
#content-3 p.column-right {
margin-left: 3%;
}
#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3
{
opacity: 1;
z-index: 100;
}
input.visible {
visibility: visible !important;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(odd) {
background-color: #FFFFFF;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#96DCF7}
In your code, you write that input:
input.visible {
visibility: visible !important;
}
But you also have:
input {
visibility: hidden;
}
You never refer to the .visible class on the code you show us, so it stays hidden. Maybe this is the problem. Try adding class="visible" to the input.
<tr>
<td>
<input class="visible" type="image" style="height:25px; width:25px;" src="plus.png">
</td>
</tr>
Try with css. Add style=" background-image: url("plus.png");" to input tag. input type="image" is not valid property of type attribute.
This seems to be a problem with the other code interacting with your html. The following code works for me:
<table>
<thead>
<tr>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="image" src="Image.png"></td>
</tr>
</tbody>
</table>
Maybe you should start here and then add your styles back little by little until you find whatever caused the problem.
EDIT: I copied all the code you have put here and assumed that you had a div with an id of container and another div with an id of content and that your table lived in there. Following #Benjamin Naesen's advice I set the visibility to visible and the picture appeared.
input.visible {
visibility: visible;
}
Did this work for you?
I have been trying to implement many different tooltips on this page for my client, he's adamant that we have a picture of the product show up when you hover over the product name in the order page. I decided to use the super simple CSS tooltip, it's very easy to implement and does exactly what we want. It works on a dynamic page, the others I tried didn't.
I have made an example here: CSS tooltip in table example.<-- updated to remove errors.
HTML:
<table class="mytable" id="cart">
<tr id="titles">
<th id="varekodetext">Varekode</th>
<th id="produkttext">Produkt</th>
<th id="pristext">Pris</th>
<th id="emptee"> </th>
<th id="antalltext">Antall</th>
<th id="pristotaltext">Pris Total</th>
<th id="sletttext">Slett</th>
</tr>
<tbody>
<tr class="even first" id="topborder" height="40px">
<td class="cart2Varekode"> <span>39261-02 </span>
</td>
<td class="cart2Produkt"> <a href="/Plantronics-CS361N.11" target="_blank" class="tooltip" title="Plantronics CS361N">
Plantronics CS361N
<span>
<img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg" alt="Plantronics CS361N" />
</span>
</a>
<p>
</p>
</td>
<td class="cart2Price">
<span class="actualPrice">2390.-</span>
</td>
<td class="cart2Salg">
<span class="orderlistPrice"></span>
</td>
<td class="antallbox">
<span class="cartQuant"><input name="item_1363" class="DG-spinner" id="text" type="text" value="1"/> <span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value=""> </button></span>
</span>
</td>
<td class="cart2Total">
<span class="basePrice">2390.-</span><span class="actualPrice">2390.-</span>
</td>
<td class="delete">
<a class="slett" href="../..//order/delete/1363?return=" title="Slett">Remove</a>
</td>
</tr>
<tr class="odd last" id="topborder" height="40px">
<td class="cart2Varekode"> <span>7050-20</span>
</td>
<td class="cart2Produkt"> <a href="/Target-7050CC-Duo-UNC.7" target="_blank" class="tooltip" title="Target 7050CC Duo UNC">Target 7050CC Duo UNC<span>
<img src="upload/productimage/7-250-2.jpg?1251022192" alt="Target 7050CC Duo UNC" />
</span>
</a>
<p>
<div class="productOptions" style="color:#b2b2b2;">
<div class="nonEditableOption">
Skal tilkobles: Alcatel IP Touch
</div>
<div class="productOptionsMenu">
<a style="color:#6c8aa2;" href="/order/options/1377" ajax="/order/optionForm/1377">Endre valg</a>
</div>
</div>
</p>
</td>
<td class="cart2Price"><span class="actualPrice">899.-</span>
</td>
<td class="cart2Salg">
<span class="salg" title="Rabatt"> </span>
<span class="orderlistPrice" title="Opprinnelige prisen">
(1599.-)
</span>
</td>
<td class="antallbox">
<span class="cartQuant"><input name="item_1377" class="DG-spinner" id="text" type="text" value="1"/>
<span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value=""> </button></span>
</span>
</td>
<td class="cart2Total">
<span class="basePrice">899.-</span><span class="actualPrice">899.-</span>
</td>
<td class="delete">
<a class="slett" href="../..//order/delete/1377?return=" title="Slett">Remove</a>
</td>
</tr>
<tr>
<td colspan="6" class="cols-six"></td>
</tr>
<tr id="topborder-tr">
<td class="subTotalCaption2"> </td>
<td colspan="4" class="subTotalCaption2">Mva (25%):</td>
<td class="amount taxAmount2">822.-</td>
<td> </td>
</tr>
<tr>
<td class="subTotalCaption2"> </td>
<td colspan="4" class="subTotalCaption2">Totalt:</td>
<td class="subTotal2">4111.-</td>
<td> </td>
</tr>
<tr>
<td colspan="5"></td>
<td class="cartQuant"></td>
<td> </td>
</tr>
<tr>
<td colspan="7">
<span> </span>
<div class="checkoutButtons">
<span> </span>
</div>
</td>
</tr>
<script type="text/javascript">
new Order.OptionLoader($('cart'));
</script>
</tbody>
</table>
CSS:
.cart2Produkt a:hover {
background: #ffffff;
text-decoration: none;
z-index: 999;
}
/*BG color is a must for IE6*/
.tooltip {
text-align: left;
}
.cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
.cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
/**************IGNORE BELOW*************/
#topborder {
/*border-top: 1px #ccc solid;*/
padding-bottom: 10px;
}
#topborder-tr {
border-top: 1px #ccc solid;
}
.mytable {
width: 100%;
margin-bottom: 20px;
}
.mytable,
.mytable th,
.mytable tr,
.mytable td {
border: 0;
letter-spacing: 1px;
}
.mytableborders,
.mytableborders th,
.mytableborders tr,
.mytableborders td {
border: 1px #ccc solid;
/*width:670px;*/
}
.mytable td,
.mytable td span {
padding-bottom: 0;
padding-top: 5px;
/*border-top: 1px #ccc solid;*/
vertical-align: middle;
font-size: 12px;
}
.mytable th {
vertical-align: bottom;
height: 30px;
padding-bottom: 5px;
}
#titles {
margin: 0px auto 0px auto;
width: 100%;
padding-bottom: 50px;
z-index: 1;
border: 1px #ccc solid;
border-left: none;
border-right: none;
}
.cart2Produkt a {
color: #0a5692;
text-decoration: none;
line-height: 15px;
clear: both;
z-index: 999;
}
productOptionsMenu {
clear: both;
}
#pristotaltext p,
#varekodetext p,
#sletttext p,
#pristext p,
#antalltext p,
#produkttext p {
font: 12px/11px "Helvetica";
margin: 0px;
color: #828273;
text-align: left;
}
#thinline,
#thinlinecopy {
background: url(../../upload/thinline.png) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
z-index: 4;
width: 747px;
height: 1px;
}
#thinlinefakt {
background: url(../../upload/thinline.png) no-repeat;
visibility: visible;
position: absolute;
top: 100px;
left: 0px;
z-index: 4;
width: 747px;
height: 1px;
}
#thinlinefakt2 {
background: url(../../upload/thinline.png) no-repeat;
background-position: bottom;
visibility: visible;
position: absolute;
top: 205px;
left: 0px;
z-index: 4;
width: 747px;
height: 28px;
margin: 5px;
margin-left: 10px;
margin-top: 0px;
padding: 5px;
color: #000000;
font-size: 22px;
font-family: "Helvetica";
}
.Fadresse {
display: block;
margin: 5px;
padding: 0;
color: #000000;
font-size: 22px;
font-family: "Helvetica";
}
#thinlinecopylever {
background: url(../../upload/thinline.png) no-repeat;
background-repeat: repeat-x;
position: relative;
left: 0px;
top: -3px;
width: 100%;
height: 1px;
padding: 0px;
}
#varekodetext {
width: 65px;
padding-left: 5px;
text-align: center;
}
#produkttext {
width: 150px;
}
/*#sgproductview {
margin: 0px auto 0px auto;
width: 595px;
height:1%;
z-index:1;
}*/
#thinlinecopy {
top: 1px;
}
#antalltext {
width: 25px;
text-align: center;
}
#pristotaltext {
width: 10%;
text-align: right;
}
#sletttext {
width: 10%;
text-align: center;
}
#thinline {
top: 19px;
position: absolute;
}
#pristext {
width: 24px;
text-align: center;
}
#emptee {
background-color: none;
width: 40px;
}
/*****************************************CONTENT*/
.cart2Produkt p,
.cart2Varekode p,
.cart2Salg p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: left;
}
.cart2Produkt p a {
color: #000000;
}
.cart2Total p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: left;
color: #000000;
}
.cart2Varekode {
visibility: visible;
z-index: 2;
text-align: center;
vertical-align: top;
padding-top: 3px;
font-weight: bold;
}
.cart2Produkt {
visibility: visible;
text-decoration: none;
text-align: left;
position: relative;
width: 28%;
font-weight: bold;
padding-bottom: 2px;
}
.cart2Produkt a {
white-space: nowrap;
}
.cart2Price {
visibility: visible;
z-index: 2;
text-align: right;
width: 6%;
position: relative;
font-weight: bold;
}
.cart2Price p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: right;
width: 80%;
}
.cart2Total p {
font-weight: bold;
text-align: right;
}
.cart2Salg p {
color: #B2B2B2;
width: 20%;
}
.cart2Total {
visibility: visible;
z-index: 2;
text-align: right;
font-weight: bold;
}
.antallbox {
white-space: nowrap;
text-align: center;
}
.antallbox input {
text-align: right;
outline: none;
width: 30px;
}
.antallbox input:focus {
text-align: right;
outline: none;
border: 1px #000 solid;
background-color: #F0F7FD;
}
.cartQuant {
width: 30px;
/* white-space: nowrap;*/
text-align: left;
margin-top: 5px;
}
.cart2Salg {
visibility: visible;
z-index: 2;
padding: 0;
margin: 0;
}
.orderlistPrice {
text-decoration: line-through;
font-weight: bold;
color: #b2b2b2;
font-size: 12px;
}
.salg {
background: url(../../upload/salg.png) no-repeat;
visibility: visible;
z-index: 2;
width: 28px;
height: 24px;
display: inline-block;
position: relative;
}
.delete {
visibility: visible;
z-index: 2;
height: 21px;
background: none;
text-align: center;
}
.slett {
width: 24px;
height: 19px;
background-image: url(../../upload/delete_box_sprite.png);
background-position: 0 0;
text-decoration: none;
display: inline-block;
}
.slett:hover {
width: 24px;
height: 19px;
background-image: url(../../upload/delete_box_sprite.png);
background-position: -24px 0;
text-decoration: none;
display: inline-block;
}
.productOptions {
background-color: #fff;
postion: absolute;
visibility: visible;
display: block;
top: 3px;
padding-left: 5px;
padding-bottom: 10px;
}
.nonEditableOption {
background-color: #fff;
float: left;
postion: absolute;
margin-right: 10px;
visibility: visible;
display: block;
}
This page used to be displayed using divs, I have since changed it to a table, as it's tabular data and easier to work with. It worked fine when it used divs, now it's in a table, it won't display the span on hover.
My questions are:
Why is it not working?
How can I make it work?
If not, does anyone
know another super easy to implement
tooltip that can work properly on a
dynamic page?
Here's the DIV tooltip for reference: DIV display tooltip.
HTML:
<div id="JSwrap">
<div id="cart2Produkt">
<p><a href="/Target-7050-Softphone-USB-Duo.220" target="_blank" class="tooltip" title="Target 7050 Softphone USB Duo ">Target 7050 Softphone USB Duo
<span><img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg?1251413379" alt="Target 7050 Softphone USB Duo " />
<br />
</span>
</a>
</p>
</div>
</div>
CSS:
#JSwrap {
/*for jsfiddle only*/
position: absolute;
left: 100px;
top: 50px;
}
#cart2Produkt {
border: 1px solid #ccc;
width: 500px;
text-align: left;
padding: 10px;
}
#cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
#cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#cart2Produkt img {
z-index: 999;
}
Edit: Just noticed it half works in IE8.
Update: It's now working in all browsers, thanks to Daniel pointing out my CSS errors, but is there a way to make it display outside of the table cell?
Find a more readable working solution here:
.cart { width: 100%; }
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
<table class="cart">
<tr>
<th id="pos">Pos</th>
<th id="name">Product</th>
<th id="price">Price</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>
<a href="productdetails.htm" class="hasTooltip">Flatscreen
<span>New visual experience!</span>
</a>
</td>
<td>19.99</td>
</tr>
<tr>
<td>2</td>
<td>
<a href="productdetails.htm" class="hasTooltip">Headset
<span>Inject music directly into your ears!</span>
</a>
</td>
<td>19.99</td>
</tr>
</tbody>
</table>
You seem to have a problem with CSS. Simply using styles of the working JSFiddle demo should fix it. You had the span set as display:none, however it looks like this tooltip works by hiding the image from the screen, using left:-999px.
Check this: http://jsfiddle.net/WNzhJ/
I have checked your code, and as you can see by the jsfiddle sytax hightlighting there are a lot of errors in your code: for example the span you who starts in your a finishes outside your a. The CSS should work like this. There are a few more errors. i think if you correct them its gonna work. (simply pass the w3c check, then anything should be just fine)
edit: i missed a thing your link should be position: relative; because your tooltip is position: absolute, the absolute always is relative to the last relative parent.
also remove the opacity: 0 in your original span
I was trying the same thing, trying to get a CSS tooltip to appear outside of the table cell. In my case the table cell was only 1px wide so it HAD to show up outside. I found out that by making the :hover span position: absolute; and then adding margin: -37px 0px 0px -50px; I could use that to move the tooltip around. BUT! If I tried to adjust the top/left/bottom/right then the absolute setting positioned it absolutely on the screen, not relative to the cell.
Hope this helps someone.