I have two tables parent and child now I want to link the child table data with the parent heading cell. I can't change the code structure like removing the child table because this is done in Odoo and also js link with this structure. I tried a lot but didn't achieve the correct output.
The HTML code is
Note: These columns should have more width depending upon their table data columns are Account, Partner, Subject
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Current Output of the table
So even though these tables are seperated, we can still use some styling to at least make it look like it's one table. But yeah the structure is quite bad and it would help a lot if you could make sure each row has always the same amount of columns. That the first row has 4 columns and the second one 8 does make this kind of a Hail Mary.
But the general idea is you give each column the width it needs.
/* Default to hide some generated styling*/
ul{ display:none; }
.p-0{ padding: 0!important; }
tbody{ font-size: 14px!important; }
table table {margin-bottom: 0!important; }
table table td { border-top: none!important; }
/*A small zoom(out) and min-width if screen is not big enough */
.container-fluid{ zoom: 0.8; min-width: 1100px; }
/* Default for 8 columns if they all would be equal*/
th, td{ width: 12.5%; }
/*The "Magic", specific widths for each column */
/*Obviously works best if each row has 8 columns*/
/*Play with it, but make sure it adds up to 100%*/
th:nth-child(1),
td:nth-child(1){
width: 20%;
}
th:nth-child(2),
td:nth-child(2){
width: 10%;
}
th:nth-child(3),
td:nth-child(3){
width: 5%;
}
th:nth-child(4),
td:nth-child(4){
width: 20%;
}
th:nth-child(5),
td:nth-child(5){
width: 15%;
}
th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
width: 10%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>==
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
I have a table and I want to compare it to the table.
If A2 > A1, I want to set the row to red color.
I can access data with Each command, but I have difficulty in the class to assign.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr id="satir">
<td>A1</td>
<td id="envanter" class="">
<center>44</center>
</td>
<td id="kritikStok" class="">
<center>45</center>
</td>
</tr>
<tr id="satir">
<td>A2</td>
<td id="envanter" class="">
<center>50</center>
</td>
<td id="kritikStok" class="">
<center>10</center>
</td>
</tr>
<tr id="satir">
<td>A3</td>
<td id="envanter" class="">
<center>26</center>
</td>
<td id="kritikStok" class="">
<center>27</center>
</td>
</tr>
<tr id="satir">
<td>A4</td>
<td id="envanter" class="">
<center>40</center>
</td>
<td id="kritikStok" class="">
<center>39</center>
</td>
</tr>
</tbody>
</table>
You can use .each loop to iterate through your tbody trs then use .find("td:eq(1) center") to get value of td from 2nd column and .find("td:eq(2) center") to get value from 3rd column then compare both and add class depending on this .
Demo Code :
//loop through tr
$("#arsivTablosu tr").each(function() {
//check the value of 2 & 3 td
parseInt($(this).find("td:eq(2) center").text()) > parseInt($(this).find("td:eq(1) center").text()) ? $(this).addClass("red_color") : ""
})
.red_color {
background-color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-sm table-bordered mt-4" style="font-size: 12px; ">
<thead>
<th>
<center>Stok</center>
</th>
<th>
<center>A1</center>
</th>
<th>
<center>A2</center>
</th>
</thead>
<tbody id="arsivTablosu">
<tr>
<td>A1</td>
<td>
<center>44</center>
</td>
<td>
<center>45</center>
</td>
</tr>
<tr>
<td>A2</td>
<td>
<center>50</center>
</td>
<td>
<center>10</center>
</td>
</tr>
<tr>
<td>A3</td>
<td>
<center>26</center>
</td>
<td>
<center>27</center>
</td>
</tr>
<tr>
<td>A4</td>
<td>
<center>40</center>
</td>
<td>
<center>39</center>
</td>
</tr>
</tbody>
</table>
I would like to know how can i turn the accordion to 90 degree on click of it for repo and bundles in the below plunkr. I am new to css. Any hekp on this is appreciated. Plunkr link - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview
<html>
<head>
<script src="angular.min.js"></script>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable" >
<div class="row">
<div class="col-md-12">
<div class="tableheight ">
<table class="treetable-nested childtable">
<thead>
<tr>
<th style="width:5%;">
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th>
<th >
Name
</th>
<th class="cell-members">
Version
</th>
<th class="cell-members">
Size
</th>
<th class="cell-members">
Date Modified
</th>
<th class="cell-members">
Labels
</th>
<th class="cell-members">
Description
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
<tr id={{item.id}}>
<td>
<button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
</td>
<td>
{{item.name}}
</td>
<td class="cell-members">
<!-- {{item.version}} --> 0
</td>
<td class="cell-members">
<!-- {{item.size}}--> 0
</td>
<td class="cell-members" >
<!-- {{item.date}}--> 0
</td>
<td class="cell-members">
{{item.label}}
</td>
<td class="cell-members">
{{item.description}}
</td>
</tr>
<tr ng-if='item.children && item.children.length > 0'>
<td colspan="7" id="bundle_1" >
<table ng-show="item.showTree" class="treetable-nested" style="width:100%;">
<tbody ng-repeat='bundles in item.children'>
<tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
<td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
<td>{{bundles.bundleName}}</td>
<td class="cell-members">{{bundles.bundleVersion}}</td>
<td class="cell-members">{{bundles.bundleSize}}</td>
<td class="cell-members">{{bundles.bundleModified}}</td>
<td class="cell-members">{{bundles.bundleLabels}}</td>
<td class="cell-members">{{bundles.bundleDescription}}</td>
</tr>
<tr ng-show='showComponents' ng-repeat='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;">
<td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/></td>
<td>{{components.value}}</td>
<td>{{components.Version}}</td>
<td>{{components.Size}}</td>
<td>{{components.Modified}}</td>
<td>{{components.Labels}}</td>
<td>{{components.Description}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Here is how I solved your problem:
Step 1: Figure out how to rotate elements with CSS. You can use the CSS transform property to rotate elements.
Step 2: Define a CSS class which would apply the transformation to the icon
.accordion.expanded:before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
Step 3: Figure out how to apply the CSS class with the transformation through AngularJS. You can toggle CSS classes with AngularJS in multiple ways.
One option would be passing the $event onlick
<button class="accordion" ng-click="displayChildren(item,item.id,$event)"></button>
and toggling the class on the element like:
$scope.displayChildren = function(item, id, event) {
angular.element((event.target)).toggleClass('expanded');
//rest of your logic
}
The second option is by manipulating a variable and setting the class to ng-class like
<button class="accordion" ng-click='showComponents = !showComponents' ng-class="{'expanded' : showComponents}"></button>
You can find the plunker i tried this out here
You can do this:
.accordion:active {
transform: rotateX(90deg);
}
If you want it rotetes permanently use jquery:
$('.accordion').click(function(){$(this).css('transform', 'rotateX(90deg)');});
and if you want it rotates and rotate back by button click:
<style>
.rotated {
transform: rotateX(90deg);
}
</style>
$('#btnRotator').click(function(){$('.accordion').toggleClass('rotated');});
Use Angular to attach an active class to expanded accordions that applies the CSS transform.
.accordion.active:before {
transform:rotate(90deg);
}
Looks like you can add ng-class="{'active' : item.showTree}" to accomplish an active class on the button. You also already have an :after target for an active class so you should remove that too.
I am working with a MVC view that has a 3 columns table. The table displays a list of Products. Column #1 (product name) contains links to a product specific page. When a user clicks on the links, I want to expand and display the product description and at the end of the product description, I want to include a link that takes the user to the product page. If a user clicks on the link again, I want to collapse it back. I have a model that represents the product and the product description is stored in its own field.
The table is built and populated as below. Any insight on how to achieve the expand/collapse via jQuery is very much appreciated.
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
foreach (product p in model.products)
{
<tr>
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
}
</tbody>
</table>
The easiest way to to utilize product IDs as well. Add the specific product ID as a data attribute, then using jQuery, pull that attribute and reuse it to target rows containing the descriptions.
$('.productname').on('click', function() {
var id= $(this).attr('data-id');
$(this).toggleClass('active');
$('.data' + id).slideToggle(500);
});
.hide {display: none; }
/* -- below is just to "pretty up" the snippet ------ */
table {
width: 100%;
background: #eee;
border-collapse: collapse;
border: 1px solid #aaa;}
th { background: #cef; color: #4cf; text-transform: uppercase; font-size: 0.8em; padding: 3px;border: 1px solid #aaa;}
td { font-size: 1.1em; padding: 5px 10px; border: 1px solid #aaa; border-bottom: none; }
tr.collapsed td { padding: 0; border: none; }
.productname:hover, .active { background: #eff; }
.productdesc { padding: 5px 10px; background: #eff; border-top: 1px solid #aaa; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!--
foreach (product p in model.products)
{
-->
<tr class="productname" data-id="prodID00">
<!-- Change data-id="prodID00" to data-id="#p.productID" -->
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID00">
<!-- Change class="hide productdesc dataprodID00" to class="hide productdesc data#p.productID" -->
<p>#p.productDescription #p.productLink</p></div>
</td>
</tr>
<!-- } -->
<!-- below are just manual iterations of the row above -->
<tr class="productname" data-id="prodID01">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID01">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID02">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID02">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID03">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID03">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID04">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID04">
<p>product description and link</p></div>
</td>
</tr>
</tbody>
</table>
Note where the prodID is located in the rows.....
I removed the foreach function and brackets because it's invalid HTML. But if they are there and dynamically generate the HTML it'll work fine. The rows I used are just manual iterations opposed to dynamic iterations.
Problem:
http://jsfiddle.net/7ZDbB/1/
If I click the first and second row's deny button,
the third row's deny button can't click just in IE 11.
I tested on IE8、IE9、IE10、Firefox and Chrome, and not this problem.
This is source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#main table{ border-collapse:collapse; width:100%; }
#main td{ border:1px solid #EEA; padding:4px 6px; }
#main table tr.excepted td{ background:#F99; }
form table {background:#FEFEF1}
</style>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body >
<div id="base">
<div id="main">
<form accept-charset="UTF-8" action="" method="post">
<input id="product_ids" name="product_ids" type="hidden">
<table>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1084">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1084" style="display: none;">
<input type="button" value="deny" id="adExceptd_1084" onclick="onDenyBtnClicked('d_1084')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1085">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1085" style="display: none;">
<input type="button" value="deny" id="adExceptd_1085" onclick="onDenyBtnClicked('d_1085')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>product info</th>
</tr>
</thead>
<tbody>
<tr id="a_tr1_d_1090">
<td colspan="2">
<input type="button" value="allow" id="adAllowd_1090" style="display: none;">
<input type="button" value="deny" id="adExceptd_1090" onclick="onDenyBtnClicked('d_1090')">
</td>
<td>
<table>
<tbody>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</tbody>
<tbody>
<tr>
<td>subheader1</td>
<td>subheader2</td>
<td rowspan="2">
other info
</td>
</tr>
<tr>
<td colspan="2">
image
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div id="allowAdSubmitButton"><input name="commit" type="submit" value="submit button"></div>
</form>
<script type="text/javascript">
var $j = jQuery;
function onDenyBtnClicked(adId) {
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j("#product_ids").val(adId);
}
// -->
</script>
</div>
</div>
</body>
</html>
I solved this problem by adjust javascript code order,like this
$j('#a_tr1_'+adId).addClass('excepted');
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
↓
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
$j('#a_tr1_'+adId).addClass('excepted');
But I really don't know the reason, because I change any of follow 11 points , the problem can be solved.
delete table border-collapse style
#main table{ border-collapse:collapse; width:100%; }
delete td border style
#main td{ border:1px solid #EEA; padding:4px 6px; }
delete td background style
#main table tr.excepted td{ background:#F99; }
delete table backgroud style
form table {background:#FEFEF1}
delete submit button
delete javascript code that add 'excepted' css to tr
$j('#a_tr1_'+adId).addClass('excepted');
delete javascript code that show allow button and hide deny button
$j("#adAllow" + adId).show();
$j("#adExcept" + adId).hide();
delete javascript code that set value to 'product_ids'
$j("#product_ids").val(adId);
delete first colspan attribute on per row
delete first rowspan attribute on per row
delete second colspan attribute on per row
I'm quite puzzled and really don't get what is causing the problem. I'm hoping someone can help me, thank you.
This is an odd issue for sure. It appears to be a bad painting issue in IE 11 that prevents interacting with the page.
Take notice that after you click 2 deny buttons (order does not matter) the hover states of all the allow/deny buttons go away. Then click down and drag off of the submit button, and viola - all of the buttons (and text) are now interactive again.
Applying some best-practices to your code coincidentally fixes this issue as well. If you are using jQuery - you should not be using inline onclick attributes. A main goal of jQuery is to separate behavior from content. A better way to bind your click events would be to add a class to your deny and allow buttons then bind the click to them or to their closest static parent (in case your rows are being dynamically added). Also, since you're already toggling a class on the nearest parent, you may as well use that class to show/hide the correct button.
New JS:
$(function() {
$('#main').on('click', '.button-deny', function() {
$(this).closest('tr').addClass('excepted');
$("#product_ids").val($(this).data('ad-id'));
});
});
Additional CSS:
.excepted .button-deny,
.button-allow { display:none; }
.excepted .button-allow { display:inline-block; }
Relevant HTML Update:
<input type="button" value="allow" class="button-allow" data-ad-id="d_1084" />
<input type="button" value="deny" class="button-deny" data-ad-id="d_1084" />
And here's an updated fiddle - http://jsfiddle.net/7ZDbB/6/
If I can pinpoint the specific painting issue that is causing this issue, I'll update this answer.
I need to add keyboard access for a cell-height-fixed HTML table. That is, if a scroll bar appears in the cell (example given), the keyboard needs to be able to scroll that cell using arrow keys. How can I achieve that? I need to support Internet Explorer 6, 7, and beyond.
Thanks a lot for the help in advance.
Table example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Simplified</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" BGCOLOR="#E8E8E8">
<tr align="center">
<td valign="top">
<strong>List</strong>
</td>
</tr>
<tr align="center">
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="2" id="reasonList">
<tr>
<th scope="row" width="15%">
<span class="workArea">
<nobr>Entry Number</nobr>
</span>
</th>
<td width="20%" align="center">
<span class="workArea">
<nobr>ALL</nobr>
</span>
</td>
<td width="10%" align="center">
<span class="workArea">
<nobr>A</nobr>
</span>
</td>
<td width="10%">
<span class="workArea">
<nobr>B</nobr>
</span>
</td>
<td width="35%" align="left">
<div style="overflow:auto; width: 330px; height: 110px;">
<span class="workArea">
Returned Customer<br>
Refund Requested<br>
Change of Address<br>
Denied Delivery<br>
Expedited processing<br>
Data Entry Errors<br>
Not Ready for Delivery<br>
Other Notices<br>
Billing Error<br>
Shipping Error<br>
Rejected Delivery<br>
</span>
</div>
</td>
<td width="15%">
<span class="workArea">
<nobr>07/15/2012</nobr>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should be able to give the cell focus by adding tabindex="-1" to the cell in question.