We Keep Coding

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>

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>

Get image to overlay on top of table

I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});

You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle

Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>

Trying to make fixed table headers with horizontal scroll bar. How to set overflow: auto, but keep margins transparent?

I am trying to make a table with fixed headers and horizontal scrolling functionality, but to do so I need to make the "section"'s top margin transparent in what I have here:
html, body {
margin:0;
padding:0;
height:100%;
}
.section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
margin-top: 37px;
}
.container {
margin-top: -37px;
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
margin-top:-37px;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<div class="section">
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div>Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/byB9d/6212/
Thanks in advance to anyone with suggestions!
P.S. I would like a pure css solution, please!

I decided to remove most of your css to (hopefully) give a clearer answer to this question. I did however not change any of your html.
Fiddle with code
x-scrolling and width
This method relies on using the "table" as a container for "thead" and "tbody". "table" will determine the scrolling along the x-axis. Therefore it has "overflow-x: auto". This way the "thead" can stay positioned above the "tbody" while scrolling the table. (will be explained later)
This element also determines the width the table will take up on your webpage.
In order for the content to scroll horizontally we have to make sure the total width of "tbody" and "thead" is longer than the width of "table".
Finally you should also add the same width to your cells so the headers appear properly above your data. I did this by applying a width to "tr th:nth-child(1), tr td:nth-child(1)" (for each column).
y-scrolling and height
We want the "thead" to stay positioned on top of our table. Even when we scroll. Therefore we simply convert it to a block element.
The "tbody" is another story. we want to be able to vertically scroll it. Therefore we add "overflow-y: auto" and also set a fixed height for the element (otherwise it will just drop down and not scroll).
The total height of the table will be the height of "thead" and "tbody". The "table will adapt its size to fit it."
The CSS (html is the same as it is in the question post)
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th div{display: none;} /*why is this html even here!?!?*/
table {
display: block;
position: relative;
border: 1px solid #000;
width: 75%;
border-spacing: 0;
margin: auto;
overflow-x: auto;
}
thead{
display: block;
position: relative;
width: 700px; /*total width of columns*/
}
tbody{
display: block;
position: relative;
height: 250px;
overflow-y: auto;
width: 700px; /*total width of columns.*/
}
tr th:nth-child(1), tr td:nth-child(1){
width: 100px;
}
tr th:nth-child(2), tr td:nth-child(2){
width: 150px;
}
tr th:nth-child(3), tr td:nth-child(3){
width: 450px;
}
PS: I assume this is what you were trying to ask.

how to freeze table header using javascript

I have table with 200 rows. The first row has headings(th tag). While i am scrolling down the heading is to be fixed and visible to all rows. Any help?
Thank You

Easiest answer, check this out -> http://www.imaputz.com/cssStuff/bigFourVersion.html
One caveat: Does not work for IE 7-9 (Does work for 6 and 10). If you need a solution for 7-9, try jQuery Scrollable Table Plugin. You can even set it up to only use the JS for IE versions 7-9 by placing the javascript call for it inside IE if comments. Then you'd know anyone using a better browser would be using pure CSS (faster) and you'd have a solution for those using crap ... i mean IE 7,8, or 9.
It basically has to do with the CSS. One key is setting table-body to display: block. Another issue is going to be in dealing with fixed widths. Just check it out. It's REALLY easy to copy that example.
Really not much more I can say! This example is PURE CSS, no JS!
jsFiddle
CSS
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th {
width: 200px
}
html>body thead.fixedHeader th + th {
width: 240px
}
html>body thead.fixedHeader th + th + th {
width: 316px
}
/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td {
width: 200px
}
html>body tbody.scrollContent td + td {
width: 240px
}
html>body tbody.scrollContent td + td + td {
width: 300px
}
HTML
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
...
...
...
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>