We Keep Coding

Fix covering hovered table / hovering problem with table

I have a problem with creating table. I need to create a table with some of cells with hover/tooltip event. For example when I point to the cell, I need to show one column table with links, but when do this in that way I have problem with overlaping (I can't use links from first cell). For now I only tried to use CSS and HTML, but soltuion with JS is also accepted.
HTML:
<div class="ttip">
<a class="foo">FOO</a>
<table>
<tr>
<td><a href='bar'>Bar</a></td>
</tr>
<tr>
<td><a href='baz'>Baz</a></td>
</tr>
</table>
</div>
<div class="ttip">
<a class="foo">FOO2</a>
<table>
<tr>
<td><a href='bar2'>Bar2</a></td>
</tr>
<tr>
<td><a href='baz2'>Baz2</a></td>
</tr>
</table>
</div>
Style:
.ttip {
position: relative;
display: table;
}
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
.ttip>table td {
border: 1px dotted #000;
padding: 2px;
}
.ttip:hover>table {
display: table;
}
Live:
https://jsfiddle.net/uLm0gjcn/3/
Regards

The FOO2 is rendered after the FOO , meaning when its displayed, its technically below FOO2 text. To fix that you need to apply z-index in your css here in .ttip>table
.ttip>table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
z-index: 1;
}
This way, when the drop-down/tool-tip appears from FOO, it is rendered on top of FOO2.
Edit. Also, to make it not transparent, apply a background-color to css in .ttip>table. for example for a white background background-color: white;

Dropdown within table (CSS/HTML/Java)

I appear to be having an issue where I would like to place a dropdown 'expandable' option within my table. I've attempted to do this with Javascript, but it always seems to just add information to the right hand column.
I'm not great at HTML/CSS and am very open to any advice on cleaning up my webpage.
I don't want it to seem like I am just asking for someone to do it for me, I have attempted to do it many times but to no avail.
The idea is to have my table have a little 'v' in the right corner of each cell in 'My Modules' which, when clicked, displays more information about the 'module' within the table. (This is what each entry looks like in my table):

Here's some code that will get you started, you can start by adding a click event to an element with the class .expand. When this is clicked then you can toggle a hidden paragraph. I'll let you experiment with this...
I'd advise working on the user experience a little, but the basic mechanics are there.
$( document ).ready(function() {
$(".expand").click( function () {
// Show .description if hidden, hide if currently showing
$(this).closest("td").find(".description").toggle();
// A little bit of styling to show the user the content has been expanded
if ( $(this).hasClass("blue-text") ) {
$(this).removeClass("blue-text");
} else {
$(this).addClass("blue-text");
}
});
});
.description {
display:none;
}
.blue-text {
color: blue;
}
table {
font-family: arial, sans-serif;
width: 100%;
background-color: rgba(0, 0, 0, 0);
padding-top: 50px
}
td,
th {
border: 1px solid rgb(200, 200, 200);
text-align: center;
padding: 8px;
}
th {
font-weight: normal;
background-color: rgba(222, 222, 222, 0.6)
}
.modules th {}
tr:hover {
background-color: rgba(20, 91, 130, 0.3)
}
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Module ID</th>
<th width="70%">Module</th>
<th>Credits</th>
<th>Semester</th>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to CS <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">
<p>Introduction to Uni <span class="expand">▼</span></p>
<p class="description">
Some extra info here.
</p>
</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to German</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
<tr>
<td>PHIL01</td>
<td class="breakrow">Introduction to Philosophy</td>
<td>20</td>
<td>Winter</td>
</tr>
</table>

Pull th content into a td data-label attribute

I'm using a responsive table style that will collapse for smaller screen sizes and display the table header before each cell.
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: #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;
color: red;
background-color:#000;
}
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;
}
table td:first-child{
color:white;
background: #000;
}
}
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Estimated arrival 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="Really freaking long div magic">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>
</tbody>
</table>
The column header is represented using the data-label attribute on each corresponding table cell. In the CSS, it's called with content: attr(data-label). I'm applying this style to some pretty large tables and I don't want to have to write the data-label for every single cell in the HTML. Is there a way to pull the th into the data-label attribute using Javascript?

Do you want the table to go from this:
| Account | Estimated arrival date | Amount | Period |
| ------- | ---------------------- | ------ | ------ |
| 1234 | 03/15/2001 | $1.00 | 3rd |
| 1235 | 04/21/2002 | $12.00 | 4th |
| 4594 | 11/11/2011 | $45.00 | 2nd |
To this?:
-----------
Account: 1234
Estimated Arrival Date: 03/15/2001
Amount: $1.00
Period: 3rd
-----------
Account: 1235
Estimated Arrival Date: 04/21/2002
Amount: $12.00
Period: 4th
-----------
Account: 4594
Estimated Arrival Date: 11/11/2011
Amount: $45.00
Period: 2nd
-----------
UPDATE
Try this code:
function toggle() {
var table = document.querySelector('.my-table');
table.classList.toggle('show-thin');
}
.table {
border-collapse: collapse;
display: inline-table;
}
.tr {
display: table-row;
}
.th, .td {
display: table-cell;
border: 1px solid #555;
padding: 3px 6px;
}
.th {
background-color: #ddd;
font-weight: bold;
text-align: center;
}
.td {
text-align: right;
}
.my-table.show-thin {
display: block;
}
.show-thin .tr {
border-bottom: 1px solid black;
display: block;
margin-bottom: 2px;
padding-bottom: 2px;
}
.show-thin .td {
border: none;
display: block;
padding: 0;
text-align: left;
}
.show-thin .td:before {
content: attr(title) ':';
display: inline-block;
font-weight: bold;
padding-right: 5px;
}
.show-thin .thin-hide {
display: none;
}
<button onclick="toggle()">Toggle</button>
<hr/>
<div class="my-table">
<div class="tr thin-hide">
<span class="th">Account</span>
<span class="th">Estimated arrival date</span>
<span class="th">Amount</span>
<span class="th">Period</span>
</div>
<div class="tr">
<span class="td" title="Account">1234</span>
<span class="td" title="Estimated Arrival Date">03/15/2001</span>
<span class="td" title="Amount">$1.00</span>
<span class="td" title="Period">3rd</span>
</div>
<div class="tr">
<span class="td" title="Account">1235</span>
<span class="td" title="Estimated Arrival Date">04/21/2002</span>
<span class="td" title="Amount">$12.00</span>
<span class="td" title="Period">4th</span>
</div>
<div class="tr">
<span class="td" title="Account">4594</span>
<span class="td" title="Estimated Arrival Date">11/11/2011</span>
<span class="td" title="Amount">$45.50</span>
<span class="td" title="Period">2nd</span>
</div>
</div>
My example used a class to change the values from a tabular format to a lined format. But it can be done using a media query as well. This was just easier to demo.
The trick is in placing the title attribute on every cell. Then using CSS to show the title when in thin mode.
This shows what the table looks like in wide mode
And this shows what it is like in thin mode
When you look at the two images you will see that the standard table format uses the term "Estimated arrival date" with on the first work capitalized. The thin version uses "Estimated Arrival Date" with all words capitalized. This is to show that the values come from different places.
In the wide mode the header comes from here:
<div class="tr thin-hide">
<span class="th">Account</span>
<span class="th">Estimated arrival date</span>
<span class="th">Amount</span>
<span class="th">Period</span>
</div>
And in thin mode it comes from the title attribute.
This does not work if you try to use <table>, <tr>, <th> and <td> tags.

This small code jQuery copy attr "data-label" TH to TD
$('table th').each(function(i,elem) {
var num = i + 1;
$('table td:nth-child(' + num + ')').attr('data-label', $(elem).text());
});

My solution with jQuery, seems to work (optional: I skip over any table cells with colspans):
$('.myDiv table').each(function (index, value) {
var headerCount = $(this).find('thead th').length;
for (i = 0; i <= headerCount; i++) {
var headerLabel = $(this).find('thead th:nth-child(' + i + ')').text();
$(this).find('tr td:not([colspan]):nth-child(' + i + ')').replaceWith(
function () {
return $('<td data-label="' + headerLabel + '">').append($(this).contents());
}
);
}
});

Fixed height for bootstrap pre-scrollable DIV

In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.
This is my HTML code
<div class="col-md-9">
<div class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed" id="sometable">
<thead>
<tr>
<th>EMP_No</th>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Type</th>
<th>#Days</th>
<th>Start Date</th>
<th>End Date</th>
<th>Half day</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
<?php //php code for print the table
?>
</div>
</div>
I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 1px;
}
thead th {
text-align: center;
background-color: #3498db;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
This is the result web page

There is a max-height property set for the .pre-scrollable div in the bootstrap css file.
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
That might be the source of your problem.

For simplicity you can use css viewport dimensions. Something like this:
<div class="pre-scrollable" style="max-height: 75vh">
<table>...</table>
</div>
where "75vh" is 75% of visible height.

Twitter bootstrap - Fixed layout with scrollable sidebar will help... As the example on linked page will show you need to set the height of the div not table.
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});

Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2

I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}