I have created an HTML table with a particular id but when I try to check if it exists or not it returns 0.
<table border = "1px"cellpadding="0" cellspacing="1" width="100%" id="Evolución_Depósitos_a_Plazo_+_Restringidos" %> style="background: none repeat scroll 0% 0%;font-size:12px;">
<thead>
<td align="center" colspan="17">Evolución_Depósitos_a_Plazo_+_Restringidos</td>
<tr>
<td class="center"></td>
<td align="center" colspan="13">Evolución Tasa de Morosidad </td>
<td align="center" colspan="3">Variacion %</td>
</tr>
</thead>
<tbody></tbody>
</table>
I have used this code to check whether if it exists:
$('table#Evolución_Depósitos_a_Plazo_+_Restringidos').length
However this returns 0. Help much appreciated. Thanks.
The issue is due to the + character in the selector which has a special meaning. You need to escape it using \\.
Also note that your HTML is invalid. The first td needs to be within a tr.
console.log($('table#Evolución_Depósitos_a_Plazo_\\+_Restringidos').length);
table {
background: none repeat scroll 0% 0%;
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1px" cellpadding="0" cellspacing="1" width="100%" id="Evolución_Depósitos_a_Plazo_+_Restringidos">
<thead>
<tr>
<td align="center" colspan="17">Evolución_Depósitos_a_Plazo_+_Restringidos</td>
</tr>
<tr>
<td class="center"></td>
<td align="center" colspan="13">Evolución Tasa de Morosidad </td>
<td align="center" colspan="3">Variacion %</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Related
So I am trying to grey out an HTML table row upon expiry date. I don't want the data to disappear or hide. I just want the row to fade grey or something similar. Maybe make it unclickable? Is this possible with javascript. Apologies for this, but I am not very well versed in javascript, however I do have a light grasp of how it works.
Here's a basic example of my html table (the original is in a div with the bootstrap class: col-lg-8)
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I'd like to grey out and disable the register link a day after the training date. Not sure if this would require the use of a class="" or id="". The data is obviously static data written in html code, as displayed above.
If this question has been asked, I'm sorry, I just haven't been able to find anything on this. Any help is highly appreciated.
A javascript approach would be something like this:
Find all <tr> elements in your table body
For each of those elements, look up the 4th cell, which has the date in it
Parse that date text to a timestamp
Compare the timestamp to the browser time
If the timestamp is earlier than the current time, add a class indicating that the row is expired
Style the expired class in CSS
Here's how that works in code:
const rowIsExpired = tr => {
const dateCell = tr.querySelector("td:nth-child(4)");
const dateString = dateCell.innerText;
const timestamp = Date.parse(dateString);
return timestamp < Date.now();
}
const tableRows = document.querySelectorAll("tbody > tr");
tableRows.forEach(tr => {
tr.classList.toggle("expired", rowIsExpired(tr));
});
.expired {
opacity: .4;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<tr>
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</tr>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Another Computer Training</b></td>
<td align="center" valign="middle"><b>expensive</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-August-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
Watch out!
There are some catches here:
You need to disable the link if you want to make sure it can't be clicked. It's best to not only use pointer-events in css for that, but actually disable it in the HTML source
This uses the browser's time. If the user loading the page has a wrong system clock or weird timezone, results may vary!
Parsing dates from strings can give unexpected results. Make sure your cell's text is formatted in a way that gives you the right outcomes.
The way I find the expiry date is brittle. If you change the order of your columns, it will break. It's best to add a specific attribute or class in the HTML so you can be sure it's easy to find in javascript.
You can use jquery to iterate your table tr to find what tr has time expired as below code.
Use addClass method to add grey class with expired row.
Use can use Date.parse to get extract time to compare, and add class disable-click to disable Register button.
$('tr').each(function(index, tr) {
let date = $(tr).find("td:eq(3)").text();
let day = date.split('-')[0];
if(day != undefined && index > 1 && day < 11){ // assume that 11 is expired day
$(tr).addClass('grey');
}
});
$('tr').each(function(index, tr) {
let date = $(tr).find("td:eq(3)").text();
let day = date.split('-')[0];
let datetime = Date.parse(date);
console.log(datetime);
if(day != undefined && index > 1 && datetime < new Date()){ // assume that 11 is expired day
$(tr).addClass('grey');
//alert($(tr).find("td:eq(4)").find("a").text())
$(tr).find("td:eq(4)").find("a").addClass("disable-click");
}
});
.grey{
background-color: grey;
}
.disable-click{
pointer-events:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr class='disabled'>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">13-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">10-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">19-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I am not sure if you want to disable the link like this:
and then you can change the link color to grey by CSS & JavaScript or whatsoever
If you check this example, the first row of the table is disabled, while others are clickable. If the data is static, you can give the classname to any row based on your requirement, and if not, give the classname to the row specifically from the code.
tbody tr {
background-color: #eee;
}
tbody tr.disabled {
background-color: gray;
pointer-events: none;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr class='disabled'>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
// calculate the difference, in days, between 2 dates
const dd=(d1,d2)=>Math.ceil( ( d1 - d2 ) / (1000 * 3600 * 24 ) );
//find all suitable anchor tags - of type button
document.querySelectorAll('td a[type="button"]').forEach(a=>{
// find the date from previous table cell and create as a Date object
let date=new Date(a.parentNode.previousElementSibling.textContent);
// calculate the difference
let diff=dd( new Date(), date );
// if beyond the threshold - do stuff
if( diff > 1 ){
a.parentNode.parentNode.classList.add('expired');
a.onclick=(e)=>{
e.preventDefault();
return false;
};
}
})
.expired td{
background:rgba(0,0,0,0.25);
color:rgba(0,0,0,0.5);
font-style:italic;
text-decoration:line-through;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Banana Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Banana</td>
<td align="center" valign="middle">16-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Intensive Banana Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">classroom</td>
<td align="center" valign="middle">18-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
If you can add a data-expdate custom attribute to your rows, it would greatly simplify your life; it would be something like this:
const rows = document.querySelectorAll('tr[data-expdate]');
const today = new Date();
rows.forEach(row => {
const expDate = new Date(row.dataset.expdate);
if (expDate <= today) {
row.classList.add('expired');
row.querySelector('a').parentElement.innerHTML = '<span>Expired<span>';
}
})
.expired {
background-color: #efefef;
color: #999;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead>
<th colspan="5" align="center">JUNE 2021</th>
</thead>
<tbody>
<tr data-expdate="2021-06-11">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr data-expdate="2021-08-30">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">30-August-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr data-expdate="2021-07-16">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">16-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable">
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="PageHeadingTable">
<tr>
<td id="PageHeading" nowrap="true">OTP Verification</td>
<td id="PageHeadingDate">
<xsl:value-of select="//faml/request/datetime" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<div class="y_scroll" id="contentarea" style="width:98%;position:absolute">
<!--y_scroll start-->
<div class="contentarea">
<!--contentarea start-->
<span id="box" class="box"> <!--rounded curve/border start-->
<div class="toppanel"><ul><li></li></ul></div>
<div class="middlepanel">
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Confirm your identity</caption>
<tr> <td>A One Time Password(OTP) has been sent to your mobile phone with number ending in </td><td id="output"></td>
</tr>
<tr ><td > If this is not your mobile number, you are advised to end your internet banking and call us</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</div>
</table>
</div>
<div class="bottompanel"><ul><li></li></ul></div>
</span>
</div>
<!--contentarea end-->
</div>
</td>
</tr>
</table>
I am trying to make an OTP page where user can input the recieved OTP on the screen.Since I have masked the user's phone number for security reasons. I am getting the value of masked phone number in seperate <td>. The only problem is there is a space between my two <td>. I am not sure how to remove the space since its nested. I have added the code in the snippet for better understanding of my problem.
Any help or suggestion will be appreciated.Thanks!!
I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>
your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.
To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,
the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.
I have multiple tables that hold images throughout my document. Each table has 3 rows (Caption/Image/Source). I need to style my caption to have a border using CSS, but when the caption is blank, the caption class still appears in my markup, resulting in a random border appearing.
Table with caption:
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
Table with no caption, with the class="caption" still in the table cell:
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="img"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I want to remove the caption class for cells that are empty, but my current JS removes the class for all my elements:
//remove empty caption
if ($('.caption').is(':empty')){
$("td").removeClass( ".caption" );
}
How can I update this so it only removes the class for empty .caption cells
JS Fiddle: https://jsfiddle.net/5dq63zL4/
very easy
td.caption:empty{
border:none
}
Instead of removing the class with JS, you can use the CSS pseudo-class :empty with :not, to style only non empty captions:
table {
margin: 20px 0
}
.caption:not(:empty) {
border-bottom: 1px solid red;
}
.source {
font-size: .85em;
color: #777
}
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I am trying to make a scrollable table with fixed headers that gets dynamically populated. I have found a good example on this site but could not implement it. I have created a fiddle here: http://jsfiddle.net/nokfw667/6/
The table gets populate by clicking the button and the javascript that creates it has been included with an example of the data that gets returned. In my example I hardcoded the table. At the top of the fiddle is the example I got from this site. I then tried to create my own but that did not work either.
Table example:
<Table id="ImageDataTable">
<thead>
<tr>
<th style="width:140px;">Whole Nbr</div>
<th style="width:90px;">Type</th>
<th style="width:190px;">Size</th>
<th style="width:100px;">Revision</th>
<th style="width:140px;">Other Nbr</th>
<th style="width:90px;">Sheet Nbr</th>
<th style="width:190px;">Of Sheets</th>
<th style="width:100px;">Frame Nbr</th>
<th style="width:140px;">Of Frames</th>
<th style="width:90px;">Doc Title</th>
<th style="width:190px;">Note</th>
<th style="width:100px;">Prnt</th>
<th style="width:140px;">Obs</th>
<th style="width:90px;">Acquire Date</th>
<th style="width:190px;">Source</th>
<th style="width:100px;">Base Doc</th>
<th style="width:140px;">Acc Doc Nbr</th>
<th style="width:90px;">CommonSubDirectory</th>
</tr>
</thead>
<tbody id="TmageDataBody" style="overflow:scroll">
<tr>
<td class="WholeNumberCell"></td>
<td class="WholeNumberCell">
ST
</td>
<td class="WholeNumberCell">
A
</td>
<td class="WholeNumberCell">
undefined
</td>
<td class="WholeNumberCell">
null
</td>
<td class="WholeNumberCell">
6
</td>
<td class="WholeNumberCell">
10
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
1
</td>
<td class="WholeNumberCell">
JOGGLING OF ALUMINUM ALLOY EXTRUDED
</td>
<td class="WholeNumberCell">
91179
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
No
</td>
<td class="WholeNumberCell">
0
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
</td>
<td class="WholeNumberCell">
\CDVolumes
</td>
</tr>
</tbody>
</Table></tbody>
</Table>
Anyone know what I am doing wrong?
#ImageDataTable {
border: 1px solid black;
border-spacing: 0;
padding: 0;
}
...
<Table id="ImageDataTable" style="overflow:scroll;">
You've told your table that when it overflows, it should scroll. So the table happily takes up as much room as it needs, and then looks to see if it is overflowing - Nope! So it doesn't scroll.
If you want your table to scroll, you need to define exactly how big the table should be, say, with a div around it, or by specifying the max-height or max-width on the table. Then the table will render itself in that area and see that it (most likely) is cut off, and stick in the scrollbars.
Hope this helps.