Develop Reference

How to replace a text from a dynamic table into a picture

On my site I have a scoreboard that receives it's info from a other website, so the content is dynamic.
I am trying to replace parts of the content of a table with pictures. So that instead of the 3 letterword of a club the logo appears. But my knowledge of CSS an Jquery is not large enough.
Can someone help my with the CSS or other html language parts?
This is the content that generates the table:
<style>
table,
td,
th {
border: 1px solid #ddd;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 1px;
}
th {
background-color: #c71b1b
}
th,
td1 {
padding: 1px;
}
th {
background-color: #c71b1b
}
</style>
<div style="overflow-x:auto;">
<table cellspacing="20">
<tbody>
<tr>
<th colspan="5">
<h1>MANNEN</h1>
</th>
</tr>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<div class="pb-dynamic" id="block-main-men">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<th colspan="5">
<h1>VROUWEN</h1>
</th>
</tr>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
<table cellspacing="20">
<tbody>
<tr>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
</div>
<!-- Include JS script to do the job, block definition(s) and main function call -->
<script src="//stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
<script type="text/javascript">
<!--//--><![CDATA[// ><!--
blockdefs = [{
leagueid: 'bel/29/2022',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2022',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks(blockdefs);
//--><!]]>
</script>
<!-- End -->
</div>
</div>

Your table stucture doesn't follow the expected pattern. Maybe the browser is also rewriting the tags to match the correct hierarchy, what "breaks" the selector logic inside the image replacer function.
Try:
<table cellspacing="20">
<tbody>
<tr>
<td>
<div class="pb-dynamic" id="block-main-women">
<p><img src="//www.pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</td>
</tr>
</tbody>
</table>

EDIT: I see how the code is supposed to work now. See edited code below.
You're not including the src tags correctly. In every script and image tag, you included something like "//google.com". That's not a valid URL. Usually, if you're fetching from another URL, you put something like src="https://google.com/"
The JS file you linked has an error in it. You can see it if you open the console. It's not using the proper path for the css file. It's saying the path for the css file pb-blocks.css is at stats.pointbench.com/css/pb-blocks.css but I'd bet it's actually at, following the same path structure as the JS file, stats.pointbench.com/pointbench/css/pb-blocks.css https://stats.pointbench.com/pointbench/css/pb-blocks.css
If you have access to that server, you can fix it there, but if not, I'll put a fix at the end.
Okay since the JS file is broken, just go to the url for the JS file and copy and paste the content and put it in your public/assets route.
Ctrl-F and find every instance of document.getElementsByTagName("head")[0].appendChild(fileref); On the line above it, you'll see fileref.setAttribute("href", gUpdateDomain + "pointbench/css/pb-blocks.css"); Replace it with this line: fileref.setAttribute("href", "https://stats.pointbench.com/pointbench/css/pb-blocks.css");
There should be two instances of this.
Also, your table structure is invalid. Below is the proper table structure
<table cellspacing="20">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Overall, your code just needs a little touch up to make it look pretty. I removed the unnecessary elements and the closing tags with no open tags. See code below:
<style>
table, td, th {
border: 1px solid #ddd;
text-align: center;
font-size: 15px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 1px;
}
th{
background-color: #c71b1b
}
th, td1 {
padding: 1px;
}
th{
background-color: #c71b1b
}
</style>
<div style="overflow-x:auto;">
<table cellspacing="20">
<thead>
<tr colspan="5">
<th><h1>MANNEN</h1></th>
</tr>
</thead>
<tbody>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
<tr>
<div class="pb-dynamic" id="block-main-men">
<p><img src="https://pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
<table cellspacing="20">
<thead colspan="5">
<th colspan="5">
<tr><h1>VROUWEN</h1></tr>
</th>
</thead>
<tbody>
<tr>
<td width=14%>DATUM</td>
<td width=13%>UUR</td>
<td width=12%>THUIS</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
<tr>
<div class="pb-dynamic" id="block-main-women">
<p><img src="https://pointbench.com/pointbench/img/pb-loading-1.gif" /></p>
</div>
</tr>
</tbody>
</table>
</div>
<!-- <script src="script.js" type="text/javascript"></script> -->
<script src="https://stats.pointbench.com/pointbench/js/pb-update-ex.js" type="text/javascript"></script>
blockdefs =
[
{
leagueid: 'bel/29/2022',
blocktype: 'team-games',
target: 'block-main-men',
teamid: '413'
},
{
leagueid: 'bel/30/2022',
blocktype: 'team-games',
target: 'block-main-women',
teamid: '207'
}
];
PBShowBlocks( blockdefs );
</script>
As for your question, replacing team initials with a team logo is possible and doable. But to do this, you need to have the team logos stored somewhere, or fetch them from a server using API. Assuming there's only a couple of team logos, you can easily download them all and store them, then replace the initials with a logo.
For this example I'm gonna use a URL of a logo from the internet.
Say we have a table like the one you have, I don't know which cell in your table is a team name. But let's assume it's the 2nd and 3rd cell in every row.
I'd write some code like this:
<table cellspacing="20">
<thead>
<th colspan="5">
<tr><h1>MANNEN</h1></tr>
</th>
</thead>
<tbody id="mensteam">
<tr>
<td width=14%>DATUM</td>
<td width=13%>RM</td>
<td width=12%>FCB</td>
<td width=12%>UIT</td>
<td width=49%>SCORE</td>
</tr>
</tbody>
</table>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function setLogo(teaminitials) {
switch(teaminitials)
{
case "RM":
var src = "https://www.freepnglogos.com/uploads/real-madrid-logo-png/real-madrid-logo-large-images-3.png";
break;
case "FCB":
var src = "https://pngimg.com/uploads/poop/poop_PNG52.png";
break;
}
return src;
}
$(document).ready(function(){
const menTable = $('#mensteam');
$('#mensteam tr').each(function(){
//first team
var teamName = $(this).children('td:nth-child(2)');
var logo = setLogo(teamName.text());
teamName.text("");
teamName.prepend('<img style="max-width: 10%;" src="' + logo + '" >');
//second team
var teamName2 = $(this).children('td:nth-child(3)');
var logo2 = setLogo(teamName2.text());
teamName2.text("");
teamName2.prepend('<img style="max-width: 10%;" src="' + logo2 + '" >');
});
});
</script>
Before
After

JavaScript sort function is not sorting and I cannot figure out why

I am working on a web app which I am new at but I have been developing apps for many years for the business forms industry so am not new at development but am pretty new at web dev.
Below is a stripped down sample to show my problem that I am running on Chrome. I picked up a solution from Sort table in HTML by column with date values desc using only javaScript and removed the 'by date' part to make it easier. The problem seems to be in the rows.sort() part as it doesn't seem to be sorting the array at all.
The comments in the code that start with //'by MPG' are my comments and the others from the downloaded code. I do understand that jquery can do this but I want to stay with JavaScript as I really dont want to load and learn another language.
function calcbal() {
sortByDate();
}
// Also I've introduced a <tbody> into your table so that I can just sort the data rows and completely ignore the header row.
function sortByDate() {
var tbody = document.querySelector("#cashflow tbody");
var rows = [].slice.call(tbody.querySelectorAll("tr")); // get trs as array for ease of use
console.log("rows b4 sort: ");
console.log(rows); //'by MPG' added for debugging
rows.sort(); //'by MPG' i think this line is where the problem is. ** * PROBLEM ** *
console.log("rows after sort: ");
console.log(rows); //'by MPG' added for debugging
rows.forEach(function(v) {
tbody.appendChild(v); // note that .appendChild() *moves* elements
});
}
table {
table-layout: fixed;
empty-cells: show;
font-family: Verdana, sans-serif;
font-size: .8em;
width: 100%;
<!--874px;
-->table-layout: fixed;
overflow: hidden;
white-space: nowrap;
text-align: left;
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
th {
padding: 3px;
font-size: .84em;
}
td {
padding: 3px;
font-size: .9em;
}
tr:nth-child(odd) {
background: #eee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="calcbal()">Sort 1st col</button>
<table id=cashflow contenteditable>
<thead>
<tr>
<th width="40px" contenteditable="false">Sortcell</th>
<!--0-->
<th width="115px" contenteditable="false">AccountName</th>
<!--1-->
<th width="40px" contenteditable="false">PayDate</th>
<!--2-->
<th width="40px" contenteditable="false">DueDate</th>
<!--3-->
<th width="32px" contenteditable="false">Cycle</th>
<!--4-->
<th width="34px" contenteditable="false">Method</td>
<!--5-->
<th width="41px" contenteditable="false">AutoPay</th>
<!--6-->
<th width="150px" contenteditable="false">Comment</th>
<!--7-->
<th width="45px" contenteditable="false">PymtDue</th>
<!--8-->
<th width="34px" contenteditable="false">Budget</th>
<!--9-->
<th width="66px" contenteditable="false">PymtSched</th>
<!--10-->
<th width="38px" contenteditable="false">Balance</th>
<!--11-->
<th width="200px" contenteditable="false">URL</th>
<!--12-->
<th width="39px" contenteditable="false">AcctBal</th>
<!--13-->
</tr>
</thead>
<tbody>
<tr>
<td>200101</td>
<td>Bank Account xxxx</td>
<td>01/01/20</td>
<td>01/01/20</td>
<td>None</td>
<td>None</td>
<td>None</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>https://www.</td>
<td>1000</td>
</tr>
<tr>
<td>210401</td>
<td>APLACE4SPACE</td>
<td>04/01/21</td>
<td>04/01/21</td>
<td>Monthly</td>
<td>Online</td>
<td>None</td>
<td></td>
<td>79</td>
<td></td>
<td>79</td>
<td></td>
<td>https://www.aplace4space.com/</td>
<td>0</td>
</tr>
<tr>
<td>210331</td>
<td>RENT TO DOUG</td>
<td>03/31/21</td>
<td>03/31/21</td>
<td>None</td>
<td>None</td>
<td>None</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>https://www.</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>

As mentioned by others in the comments you need to supply a function to the compareFunction parameter. Otherwise the sort function compares the string representation of your rows which is the same for all rows: [object HTMLTableRowElement].
In the example below I use firstElementChild to get the first element of the row. It seems like it's filled with an integer value so i converted the textual content to an integer. This integer can than be used to compare 2 rows.
See documentation on sort()
function calcbal() {
sortByDate();
}
function sortByDate() {
var tbody = document.querySelector("#cashflow tbody");
var rows = [].slice.call(tbody.querySelectorAll("tr"));
//Add a compare function to the compareFunction paramter that defines how to sort the array.
rows = rows.sort((row1, row2) => {
return parseInt(row1.firstElementChild.textContent) - parseInt(row2.firstElementChild.textContent)
});
rows.forEach(function(v) {
tbody.appendChild(v);
});
}
table {
table-layout: fixed;
empty-cells: show;
font-family: Verdana, sans-serif;
font-size: .8em;
width: 100%;
<!--874px;
-->table-layout: fixed;
overflow: hidden;
white-space: nowrap;
text-align: left;
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
th {
padding: 3px;
font-size: .84em;
}
td {
padding: 3px;
font-size: .9em;
}
tr:nth-child(odd) {
background: #eee;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="calcbal()">Sort 1st col</button>
<table id=cashflow contenteditable>
<thead>
<tr>
<th width="40px" contenteditable="false">Sortcell</th>
<!--0-->
<th width="115px" contenteditable="false">AccountName</th>
<!--1-->
<th width="40px" contenteditable="false">PayDate</th>
<!--2-->
<th width="40px" contenteditable="false">DueDate</th>
<!--3-->
<th width="32px" contenteditable="false">Cycle</th>
<!--4-->
<th width="34px" contenteditable="false">Method</td>
<!--5-->
<th width="41px" contenteditable="false">AutoPay</th>
<!--6-->
<th width="150px" contenteditable="false">Comment</th>
<!--7-->
<th width="45px" contenteditable="false">PymtDue</th>
<!--8-->
<th width="34px" contenteditable="false">Budget</th>
<!--9-->
<th width="66px" contenteditable="false">PymtSched</th>
<!--10-->
<th width="38px" contenteditable="false">Balance</th>
<!--11-->
<th width="200px" contenteditable="false">URL</th>
<!--12-->
<th width="39px" contenteditable="false">AcctBal</th>
<!--13-->
</tr>
</thead>
<tbody>
<tr>
<td>200101</td>
<td>Bank Account xxxx</td>
<td>01/01/20</td>
<td>01/01/20</td>
<td>None</td>
<td>None</td>
<td>None</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>https://www.</td>
<td>1000</td>
</tr>
<tr>
<td>210401</td>
<td>APLACE4SPACE</td>
<td>04/01/21</td>
<td>04/01/21</td>
<td>Monthly</td>
<td>Online</td>
<td>None</td>
<td></td>
<td>79</td>
<td></td>
<td>79</td>
<td></td>
<td>https://www.aplace4space.com/</td>
<td>0</td>
</tr>
<tr>
<td>210331</td>
<td>RENT TO DOUG</td>
<td>03/31/21</td>
<td>03/31/21</td>
<td>None</td>
<td>None</td>
<td>None</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>https://www.</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>

How to hide element correctly in html tables

I would like to behind row2by default and by clicking tables,it will show itself.
When I try my work like below,row2 is behind. but the shape of tables distorted.
I would like to align tables and behind row2 by deafault.
How can I fix it ?
Why this table distorted?
Thanks
$(function() {
$("table").click(function() {
$("table tr:eq(1)").toggleClass('show');
});
});
td {
padding:5px;
border:solid black 1px;}
table{
border-collapse:collapse;
border:solid black 1px;
cursor:pointer}
tr:nth-child(2):not([class]) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2">header</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

If you want to toggle the row, I suggest you have a concept of "hide", rather than "show".
Also, get rid of the second row header. Not sure why you need it, if you are spanning 2 rows.
$(() => {
$('table').click(function(e) {
$(this).find('tr:eq(1)').toggleClass('hide');
});
});
table, th, td {
border: solid black 1px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 0.25em;
}
th {
cursor: pointer
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody>
<tr>
<th rowspan="2">Header</th>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr class="hide">
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</tbody>
</table>

Freeze Multiple Rows & Multiple Columns of HTML Table

I have a HTML table which is generated by back-end (C#). I want to Fix the Header (2 Rows having Sale Type & Location) and First Two columns (Product Name & Description).
My table looks like the following:
The Header Row has a rowspan of 2 & the First Two columns(Under Description) also need to be freezed.
I have tried the following code:
<script>
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
$('.firstrow').css("left", $("tbody").scrollLeft());
});
});
</script>
<table id="ContentPlaceHolder1_tbl_Currentday" class="table table-responsive ReportTbl table-bordered">
<tr class="firstrow">
<th colspan="2" rowspan="2">Description</th><th colspan="12">Daily Sales</th><th colspan="11">MONTH TO DATE SALES</th><th colspan="3">FORECAST</th><th colspan="12">AVAILABLE STOCK</th><th colspan="10">IN TRANSIT QUANTITY</th>
</tr>
<tr class="firstrow">
<th>PROD QTY</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>MTD</th><th>TOTAL</th><th class="totaltd">ACH%</th><th>FAC</th><th>KHI</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th><th>HYD</th><th>LHR</th><th>MUL</th><th>ISD</th><th>SUK</th><th>FSD</th><th>PSH</th><th>GUJ</th><th>QTA</th><th class="totaltd">TOTAL</th>
</tr><tr>
<td rowspan="3" style="font-weight:bold;"> AAMRUS</td><td> AAMRUS CANDY - (BAG) - (35X60) - (670)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>3,572</td><td>202</td><td>926</td><td>36</td><td>414</td><td>1,417</td><td>562</td><td>0</td><td>1,310</td><td>0</td><td class="totaltd">8,439</td><td>9,065</td><td>16,997</td><td class="totaltd">93.09%</td><td>2,426</td><td>432</td><td>531</td><td>0</td><td>167</td><td>651</td><td>327</td><td>243</td><td>4</td><td>0</td><td>36</td><td class="totaltd">2,391</td><td>0</td><td>0</td><td>0</td><td>0</td><td>152</td><td>304</td><td>0</td><td>228</td><td>0</td><td class="totaltd">684</td>
</tr><tr>
<td> AAMRUS CANDY - (BOX) - (70X30) - (1032)</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td class="totaltd">0</td><td>1,126</td><td>1,462</td><td>1,270</td><td>333</td><td>737</td><td>1,576</td><td>813</td><td>575</td><td>218</td><td>60</td><td class="totaltd">8,170</td><td>9,068</td><td>17,003</td><td class="totaltd">90.1%</td><td>4,872</td><td>723</td><td>590</td><td>964</td><td>522</td><td>613</td><td>597</td><td>634</td><td>441</td><td>646</td><td>74</td><td class="totaltd">5,804</td><td>0</td><td>441</td><td>252</td><td>252</td><td>315</td><td>126</td><td>252</td><td>0</td><td>0</td><td class="totaltd">1,638</td>
</tr><tr class="totaltd">
<td>Total</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>4,698</td><td>1,664</td><td>2,196</td><td>369</td><td>1,151</td><td>2,993</td><td>1,375</td><td>575</td><td>1,528</td><td>60</td><td>16,609</td><td>18,133</td><td>34,000</td><td>91.6%</td><td>7,298</td><td>1,155</td><td>1,121</td><td>964</td><td>689</td><td>1,264</td><td>924</td><td>877</td><td>445</td><td>646</td><td>110</td><td>8,195</td><td>0</td><td>441</td><td>252</td><td>252</td><td>467</td><td>430</td><td>252</td><td>228</td><td>0</td><td>2,322</td>
</tr>
</table>
it only freezed the First Column, NOR first Two columns, NOR first two Rows.
How can I achieve this please Help
thanks

Target output
Spreadsheet example of freezed multiple rows and columns
Box structure
Make a <div> container that will be the scrollable component. Make sure the <div> container has a fixed width and height, and should be smaller than the actual content.
Let B, C, and D be the freezed rows and columns.
Let A be the actual table content.
Make the components A, B, C, and D using the <table> tag.
HTML
<div id="container">
<table id="a">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>A4</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>B4</th>
</tr>
</thead>
<tbody>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
<table id="b">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>A4</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
<th>B3</th>
<th>B4</th>
</tr>
</thead>
</table>
<table id="c">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
</tr>
</thead>
<tbody>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
</tbody>
</table>
<table id="d">
<thead>
<tr>
<th>A1</th>
<th>A2</th>
</tr>
<tr>
<th>B1</th>
<th>B2</th>
</tr>
</thead>
</table>
</div>
CSS
#container{
width:90px;
max-height:90px;
overflow: auto;
position: relative;
}
#a{
position: relative;
z-index: 1
}
#b{
background: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 2
}
#c{
background: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 2
}
#d{
background: #fff;
position: absolute;
top: 0px;
left: 0px;
z-index: 3
}
JavaScript / jQuery
$('#container').scroll(function(event) {
var scrolledX = $(this).scrollLeft();
var scrolledY = $(this).scrollTop();
$(this).find('#c').css('left',scrolledX+'px');
$(this).find('#b').css('top',scrolledY+'px');
$(this).find('#d').css('left',scrolledX+'px');
$(this).find('#d').css('top',scrolledY+'px');
});

table with fixed first header and fixed column

I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.

This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}

<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.