I have a table which will be loaded dynamically using jquery. I have give align parameter as center. But its aligned left. Please help me
<title></title>
<style>
.tb1 { background-color : #EEE8AA; color: black; font-size: 13pt; onfocus="this.value=" font:verdana}
.inp { border: 0; color: black; font-size: 13pt; onfocus="this.value=" font:verdana }
/* button styles */
.button0 { background-color: Orange ; border: 110; color: black; text-align: center; text-decoration: none; display: inline-block; border-color: #ff0000; }
.button1 { background-color: Orange ; border: 110; color: black; text-align: center; text-decoration: none; margin: 0 auto; display: block; border-color: black;}
.button2 { background-color: Orange ; border: 110; color: black; text-align: center; text-decoration: none; margin: 0 auto; display: block; border-color: black;}
/* web page layout styles */
html, body { margin: 0;}
div { height: 30%; background-color: white; float: left;}
#left { width:33%; margin-top:20px }
#center { width:33%; margin-top:20px }
#right { width:33%; margin-top:20px }
/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: center; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 300px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
</style>
</head>
<body>
<div id="left">
GRn: <input type="text" id="grn" class="tb1" placeholder="Provide your input" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br>
Unit: <input type="text" list="combo-options" id="unit" class="tb1">
<datalist id="combo-options">
<option value="UNIT 1">UNIT 1</option>
<option value="UNIT 2">UNIT 2</option>
</datalist><br><br>
<input type="button" id="find" value="Find" class="button0"/><br><br>
</div>
<div id="center">
PO no: <input type="text" id="pono" readonly="readonly" class="inp"/><br><br>
PO Date: <input type="text" id="podt" readonly="readonly" class="inp"/><br><br>
V.Inv.No <input type="text" name="vinvno" readonly="readonly" id="vinvno" class="inp"/><br><br>
V.Inv.Date <input type="text" name="vinvdt" readonly="readonly" id="vinvdt" class="inp"/><br><br>
</div>
<div id="right">
IRno: <input type="text" name="irepno" id="irepno" class="inp" /><br><br>
Creation Date <input type="date" name="cdate" id="cdate" class="inp" value="<%= new SimpleDateFormat("dd-MM-yyyy").format(new java.util.Date())%>"><br><br>
Type<select name="evalu" id="evalu">
<option value="electrical">Electrical</option>
<option value="mechanical">Mechanical</option>
</select>
</div>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
<div id="inspdiv">
</div>
</body>
</html>
</html>
That is due to width:100%; in table.Remove that it works just fine.
JSFIDDLE
/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: center; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 500px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
EDIT:
Remove float:left from div in CSS.That is causing problem.Instead use display:inline-block
/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: left; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 500px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
Remove width: 100%; from table and it will be aligned to the center.
Just add text-align: center; to th and td in CSS.
/* table-itemtable styles */
table { border-collapse: collapse; width: 100%;}
th, td { text-align: left; padding: 8px; text-align:center;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
height: 500px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<div id="tablediv">
<table cellspacing="0" id="itemtable">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</table>
</div>
Related
How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>
I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}
set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have got a HTML table built like this:
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table.sortable, tbody {
counter-reset: sortabletablescope;
vertical-align: middle;
}
table.sortable, thead tr::before {
content: "";
display: table-cell;
vertical-align: middle;
}
table.sortable, tbody tr::before {
content: counter(sortabletablescope);
counter-increment: sortabletablescope;
display: table-cell;
vertical-align: middle;
text-align: center;
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1990<br>data1</td><td>data2</td></tr>
<td>2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I am trying to move the list number so it looks like its part of the table, and not printed before, so there is no whitespace before "Name" in the table header. Like how it looks here (here the numbers are added manually):
<html>
<head>
<meta charset="UTF-8">
<style>
body {font-family:'-webkit-system-font', 'HelveticaNeue-Light';}
</style><style type="text/css">
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<center>
<table class="sortable" id="myTable">
<tr>
<th>Name</th>
<th>Play</th>
<tr>
<td>1. 1990<br>data1</td><td>data2</td></tr>
<td>2. 2000<br>data3</td><td>data4</td></tr>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
</center>
</body>
</html>
I have managed to get the number where I want it by using
position: relative; bottom: -6px;
position: relative; left: +25px;
But that doesn't remove the whitespaces before "Name" in the table header. Is this possible to change?
You can use a CSS counter indeed via the :before pseudo-element style like a table-cell: (but there got to be one on each row to preserve the right amount of columns)
Sizing the pseudo-element will allow you to set a negative text-indent on the first th to align it to the far left
example
/* pseudo tr:before for CSS COUNTER for table tr */
tr:before {
content: '';
display: table-cell;
vertical-align: middle;
}
thead th:first-child {
text-indent: -1.5em;
}
tbody {
counter-reset: trs
}
tbody tr:before {
counter-increment: trs;
content: counter(trs)'. ';
width: 1.5em;
text-align: right;
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Mind the structure of your table to have no surprise once rendered by browsers.
if it needs to be inside the first cell, then set the counter to the first td and let it float
/* pseudo tr:before for CSS COUNTER for table tr */
tbody {
counter-reset: trs
}
tbody td:first-child:before {
counter-increment: trs;
content: counter(trs)'. ';
float:left
}
/* end css counter */
body {
font-family: '-webkit-system-font', 'HelveticaNeue-Light';
}
table {
border-spacing: 0;
width: 50%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th,
td {
text-align: left;
font-size: 16px;
padding: 6px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<table class="sortable" id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td>1990<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2000<br>data3</td>
<td>data4</td>
</tr>
<tr>
<td>2010<br>data1</td>
<td>data2</td>
</tr>
<tr>
<td>2020<br>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
I have this snippet below working fine. How to get the ID or Class of the append data from the checkbox. As I try below code $('.chk').click(function(){
console.log(cc);}) but its not working. What I want to happen is After the I added two lines and I check the 1st checkbox in added data and click the remove it will remove because it has a check.
$(".checkAll").change(function() {
$(".selectall").prop('checked', $(this).prop("checked"));
$(".gone").removeAttr('checked');
});
$('.vv .ww').on('click', function() {
$("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>');
});
$('.chk').click(function() {
console.log(cc);
})
$('.gone').click(function() {
var aa = $('.chk').val();
var bb = $('.chk').is('checked');
console.log(aa);
console.log(bb);
$(".remove").remove();
});
#media only screen and (max-width: 640px) {
/* Force table to not be like tables anymore */
.no-more-tables table,
.no-more-tables thead,
.no-more-tables tbody,
.no-more-tables th,
.no-more-tables td,
.no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.hdv {
width: 46%;
padding: 5px;
display: inline-block;
}
.dsp {
font-weight: bold;
}
.no-more-tables tr {
border: 1px solid #ccc;
}
.no-more-tables td {
/* Behave like a "row" */
width: 100%;
border: none;
border-bottom: 1px solid #eee;
white-space: normal;
text-align: left;
}
/*
Label the data
*/
}
.cf {
width: 100%;
}
.cf > tr > th {
text-align: left;
}
.cf > tbody > tr > td {
height: 25px;
}
.newvariation > td > input:focus {
outline: 0px !important;
-webkit-appearance: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.vv > div {
margin: 5px;
display: inline-block;
cursor: pointer;
}
#media only screen and (min-width: 641px) {
.dsp {
visibility: hidden;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-more-tables">
<table class="table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th class="c1">
<input type="checkbox" class="checkAll" />
</th>
<th class="c2">Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="selectall" />
</td>
<td>
<span class="hdv dsp">Product</span>
<span class="hdv" contenteditable="true">iPhone 7 Plus</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="vv">
<div class="ww">+ Add new Line</div>
<div class="gone">- Remove selected</div>
</div>
Basically you just need to select only checked checkbox with chk class, then find these parent with remove class.
Bellow is the revision of your snippet.
$(".checkAll").change(function() {
$(".selectall").prop('checked', $(this).prop("checked"));
$(".gone").removeAttr('checked');
});
$('.vv .ww').on('click', function() {
$("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>');
});
$('.chk').click(function() {
console.log(cc);
})
$('.gone').click(function() {
$('input:checked.chk').each(function(idx, item){
var row = $(item).parents(".remove");
if (row != null)
row.remove();
});
});
#media only screen and (max-width: 640px) {
/* Force table to not be like tables anymore */
.no-more-tables table,
.no-more-tables thead,
.no-more-tables tbody,
.no-more-tables th,
.no-more-tables td,
.no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.hdv {
width: 46%;
padding: 5px;
display: inline-block;
}
.dsp {
font-weight: bold;
}
.no-more-tables tr {
border: 1px solid #ccc;
}
.no-more-tables td {
/* Behave like a "row" */
width: 100%;
border: none;
border-bottom: 1px solid #eee;
white-space: normal;
text-align: left;
}
/*
Label the data
*/
}
.cf {
width: 100%;
}
.cf > tr > th {
text-align: left;
}
.cf > tbody > tr > td {
height: 25px;
}
.newvariation > td > input:focus {
outline: 0px !important;
-webkit-appearance: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.vv > div {
margin: 5px;
display: inline-block;
cursor: pointer;
}
#media only screen and (min-width: 641px) {
.dsp {
visibility: hidden;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-more-tables">
<table class="table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th class="c1">
<input type="checkbox" class="checkAll" />
</th>
<th class="c2">Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="selectall" />
</td>
<td>
<span class="hdv dsp">Product</span>
<span class="hdv" contenteditable="true">iPhone 7 Plus</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="vv">
<div class="ww">+ Add new Line</div>
<div class="gone">- Remove selected</div>
</div>
i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.
PS: I don't like to use JS, but if it's necessary I can live with that.
JsFiddle: https://jsfiddle.net/d4m5hj6f/
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td {
border:1px solid black;
overflow: hidden;
}
th {
background-color: #eff0f0;
}
td {
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table {
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td {
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td {
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
height: 50px;
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Look here ---></th>
<th width="650px">hover Under this</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
</table>
</a>
</div>
Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.
Are you trying to achieved something like this
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td{
border:1px solid black;
overflow: hidden;
}
th{
background-color: #eff0f0;
}
td{
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table{
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td{
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td{
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
/* height: 50px;*/
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Cislo/Meno</th>
<th width="650px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
In your code you have a fix value for your tooltip width and height.
If you need to make the toolip width and height adjusted dynamically by its content you should remove the width and height value.
Edit based on your comment.
If you need to keep some space between the tooltip and your view port you can use margin property, this will allow some space on each d side of your tooltip.
Try to comment out as in the follow example:
https://jsfiddle.net/d4m5hj6f/6/
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
/*width: 680px;*/
/*height: 50px;*/
font-weight: bold;
}
Please look at this JSFiddle as reference.
Using tablesort and the accompanying css, I am trying to get the rows with first/last name to have alternating row colors. Also, I need the rows in the sub-table with date and time to have a white background.
I think part of my problem is that I also have a different class on the first td under the tablesort table. I need that class to kick off the trigger to toggle the hidden row... I just can't seem to get the CSS right.
Here is my HTML
<table class="tablesorter" id="table1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td>John</td>
<td>Appleseed</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">
<table class="sub-table" id="SPID" border=1>
<thead>
<th>Date</th>
<th>Time</th>
</thead>
<tbody>
<tr>
<td>12/1/13</td>
<td>4:00AM</td>
</tr>
<tr>
<td>12/1/14</td>
<td>7:00AM</td>
</tr>
<tr>
<td>12/1/15</td>
<td>6:00AM</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="parent-row">
<td>David</td>
<td>Goliath</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail about David</td>
</tr>
<tr class="parent-row">
<td>Amie</td>
<td>Winehouse</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none">
<td colspan="6">Detail About Amie</td>
</tr>
</tbody>
And Here is the CSS
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row td {
background: #8dccc8;
}
table.tablesorter tr.parent-row-details td {
background: grey;
}
table.sub-table thead tr th {
background-color: #FFF;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
table.sub-table tbody tr td {
background-color: green;
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}
is this something like you wanted?
http://jsfiddle.net/johnboker/q7VL3/116/
added > td
$(document).ready(function () {
$("table.tablesorter tr.parent-row:even > td").css("background-color", "blue");
});
also changed
table.sub-table tbody tr td {
background-color: white; /* made this white */
border: 1px solid #000;
font-size: 8pt;
padding: 4px;
}