I want to fix the table header when scrolling. And the rest of the page content to scroll. But the original layout of the table breaks. The width of the table columns and rows is of different size. I am not able to fix this.
My code:
HTML
<section class="scrollable padder">
<table class="table table-striped m-b-none text-sm m-t">
<thead class="ff">
<tr>
<th >1col</th>
<th >2col</th>
</tr>
</thead>
<tbody>
<tr>
<td class="new_td">field1</td>
<td class="new_td">field2</td>
</td>
</tbody>
</table>
</section>
JS
$(".padder").scroll(function() {
if ($(".padder").scrollTop() > 100) {
$('.ff').addClass('fixed');
}
else
{
$('.ff').removeClass('fixed');
}
});
CSS
.fixed{
position:fixed;
top:50px;
}
try this tag and let me know the result
<section class="scrollable padder">
<table class="table table-striped m-b-none text-sm m-t">
<thead class="ff">
<tr>
<th >1col</th>
<th >2col</th>
</tr>
</thead>
<tbody>
<tr>
<td class="new_td">field1</td>
<td class="new_td">field2</td>
</tr>
</tbody>
</table>
</section>
You can implement using this:
<table id="fixed"></table>
Css
#fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
Js
var $fix= $(".table > thead").clone();
var $hfxd = $("#fixed").append($fix);
$(".padder").scroll(function() {
if ($(".padder").scrollTop() > 100 && $fix.is(":hidden"))
{
$hfxd.show();
}
else
{
$hfxd.hide();
}
});
Related
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
I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">
Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>
you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>
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.
Here is my JsFiddle
On click on arrow down image, i am displaying the next tr (initially hidden) which have a td with colspan 5 and table inside it.
My question is why the td is not expanding to the full row, as i have specified colspan=5
$(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).closest("tr").next().removeClass('hidden').addClass('show');
});
});
because your .show bootstrap css rule contains following
.show{
display:block; !important;
}
You can overwrite it with custom CSS-rule for the row like this:
.show{
display:table-row !important;
}
Demo
The class show is causing the trouble. Removing the class solves the problem.
HTML
<table class="table">
<caption>Order History</caption>
<thead>
<tr>
<th>S.No</th>
<th>Transaction ID</th>
<th>Date & Time</th>
<th>Status</th>
<th>View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>T00580901</td>
<td>10 May'14<br />10:10 am</td>
<td>Delivered</td>
<td>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-repeat"></span>
</td>
</tr>
<tr style="display:none">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Dish Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>South Indian Meal</td>
<td>Rs. 100</td>
<td>2</td>
<td>Rs. 200</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Jquery
$(function () {
$('.glyphicon-chevron-down').click(function () {
console.log("hi");
$(this).closest("tr").next().toggle();
});
});
See the update fiddle.
http://jsfiddle.net/2Xzfb/2/
I'm not sure what happened, I've not looked into it that much but this seems to work: http://jsfiddle.net/57d3M/1/.
$(function () {
$('.glyphicon-chevron-down').click(function () {
$(this).closest('tr')
.next('tr')
.toggleClass('hidden');
});
});
Set table-layout to fixed:
.table{
table-layout: fixed;
width: 400px;
}
demo
I have a table contains two header rows Demo.
<thead>
<tr>
<th colspan="4"><big>Variable Details</big></th>
</tr>
<tr>
<th>Variable Name</th>
<th>Starting Value</th>
<th>Default Value</th>
<th>Description</th>
</tr>
</thead>
I want to freeze the top two header rows (thead section of the table). Any thoughts.
After referring many web-site links, I am able to fix two header rows using pure CSS. Updated fix.
<div id="header-wrap"><b>Variable Details</b>
<table border=1 cellpadding=0 cellspacing=0 width=100% style="margin-top:5px">
<thead>
<tr>
<td background-color:#E0EBEB;"><b>Variable Name</b></td>
<td background-color:#E0EBEB;"><b>Starting Value</b></td>
<td background-color:#E0EBEB;"><b>Default Value</b></td>
<td background-color:#E0EBEB;"><b>Description</b></td>
</tr>
</thead>
</table>
</div>
CSS:
#header-wrap { position: fixed; width: 100%; height: 55px; top: 0; text-align:center; background-color:#F0F0F0; margin-top:0px; margin-bottom:40px;}
td {width:25% }
Change the CSS property position to "sticky" in order to get a sticky table head. See below.
CSS:
thead { position: sticky; top: 0px; z-index: 10; }
NOTE: You may have to adjust your z-index depending on your other CSS properties.