CSS/HTML Div Resizing and Table positioning - javascript

I have 3 divs, the parent div, child div at the top and another on the bottom. Any help will be highly appreciated, here is what I want to achieve:
When the top div resizes/increases its size, the bottom div that contains a table will shrink but remain in its position. Please see below the mock up so that you can clearly visualize it.
Here is my Mock Up Image
Here is my JSFiddle: https://jsfiddle.net/koykoys/t09v854r/8/
$("#btnExpand").click(function(){
$(#top).css("height","400px");
});
.wrapper{
height: 73vh;
display: flex;
flex-direction: column;
border: 2px solid red;
}
#top{
border:2px solid blue;
position:relative;
height:100px
}
#bottom{
border:2px solid green;
position:relative;
height:100%"
}
table, th, td {
border: 1px solid black;
}
<div class="wrapper">
<div id "expand">
<input id = "btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top"></div>
</br>
<div id "Download CSV">
<button >
Download CSV of Table
</button>
</div>
<div id="bottom" style="border:2px solid green;position:relative;height:100%" >
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
</tr>
<tr>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
</table>
</div>
</div>


Set your wrapper height to auto.
$(document).ready(function(){
$("#btnExpand").click(function(){
$('#top').animate({
'height' : '400px'
});
});
});
.wrapper{
width:100%;
height: auto;
display: flex;
flex-direction: column;
border: 2px solid red;
}
#top{
border:2px solid blue;
position:relative;
height:100px;
}
#bottom{
border:2px solid green;
position:relative;
height:100%"
}
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id = "expand">
<input id = "btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top" >
</div>
</br>
<div id = "Download CSV">
<button >
Download CSV of Table
</button>
</div>
<div id="bottom" style="border:2px solid green;position:relative;height:100%" >
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Firstname</th>
</tr>
<tr>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
<tr>
<td>Boom</td>
<td>Panes</td> <td>John</td>
<td>Jaranjan</td>
<td>John</td>
<td>Jaranjan</td>
<td>John</td>
</tr>
</table>
</div>


wrapper height must be auto:
.wrapper{
height: auto;
display: flex;
flex-direction: column;
border: 2px solid red;
}
And you've forgotten the double-quotes:
$("#top").height("400px");


Here's new js fiddle that works https://jsfiddle.net/whp257jp/
You had errors in your html markup. I fixed it.
<div class="wrapper">
<div id="expand">
<input id="btnExpand" type="button" value="Expand Blue Div"/>
</div>
<div id="top" >
</div>
<br/>
jQuery:
$("#btnExpand").click(function(){
$('#top').css("height","400px");
});
It's not full solution for your task. I just made your code work.
Task that u given pretty hard for u as beginner. U need to learn css, html and jQuery more deeply to solve this task.

Related

Why is only the first button turning green? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
I am a noobie programmer, using MAC OS and Visual Studio Code trying to build a responsive fitness routine in HTML for personal use, as a personal project.
I am trying to get all my buttons to turn green on click, the first one is turning green fine, but the rest are not. I have uploaded a code pen here: https://codepen.io/3991chris/full/OJEZwKL
Any help would be awesome!
I tried
let btnDone = document.querySelectorAll('#done');

There's two main issues in your code. Firstly all the buttons have the same #done id applied to them, which is invalid. id must be unique within the DOM. Change these to a class.
From there you need to amend your JS code to use querySelectorAll('.done') so that it returns a collection of all the elements you can loop through. Within that loop you can bind your event handlers to each button.
Secondly, it looks like your goal is to toggle the styling of the buttons on successive clicks. Therefore you should toggle() the class on the element, not use removeClickHandler().
document.querySelectorAll('.done').forEach(btn => {
btn.addEventListener('click', e => e.target.classList.toggle('active'));
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.btn {
display: flex;
justify-content: center;
}
.btn .done.active {
background-color: #4cae4c;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: black;
color: #fff;
border: none;
border-radius: 5px;
}
.topnav {
overflow: hidden;
background-color: blue;
flex-wrap: wrap;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: red;
color: white;
}
<div class="card">
<div class="topnav">
Home
A
B
C
<a class="active" href="leg day d.html">D</a>
E
</div>
<h1>Leg Day D</h1>
<div class="card">
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Deadlift</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>60 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>65 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>70 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>75 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/sumosquat.png" style="width:100%">
<h1>2. SumoSquats</h1>
<p>Feet at 45 angle, wide legs,<br> make sure back straight</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>80 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>85 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/flexora.webp" style="width:100%">
<h1>3. Flex Chair</h1>
<p>alig knees with chair, <br> keep back on seat</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/stepups.png" style="width:100%">
<h1>4. StepUps</h1>
<p>Use bench or box <br> and do 10 each leg,<br> up and down same leg</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 20</td>
<td>15 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 20</td>
<td>20 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 20</td>
<td>20 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 20</td>
<td>25 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/adutora.webp" style="width:100%">
<h1>5. Adutora</h1>
<p>Stretch to allow wider leg</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>Max kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>Max kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>Max kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>Max kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/pelvicthrust.jpeg" style="width:100%">
<h1>6. Pelvic Thrust</h1>
<p>Top of shoulders and chest<br>should be on bench</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>75 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>80 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>80 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/gemeossentado.webp" style="width:100%">
<h1>7. Seated Calf Raise</h1>
<p>Make sure to go slow</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 10</td>
<td>60 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 10</td>
<td>65 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 10</td>
<td>65 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 10</td>
<td>70 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/landminesquat.webp" style="width:100%">
<h1>8. Landmine Squat</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>40 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>45 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>50 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>55 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/pullthrough.webp" style="width:100%">
<h1>9. Pull Through</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>20 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>30 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>35 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>40 kg</td>
</tr>
</table>
</div>
<div class="card">
<img src="images/liedownlegcurl.jpeg" style="width:100%">
<h1>10. Lie Down Leg Curl</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back</p>
<div class="btn">
<button class="done">Done</button>
</div>
<table>
<tr>
<th>Week</th>
<th>Set X Rep</th>
<th>Weight</th>
</tr>
<tr>
<td>1</td>
<td>4 * 8</td>
<td>50 kg</td>
</tr>
<tr>
<td>2</td>
<td>5 * 8</td>
<td>55 kg</td>
</tr>
<tr>
<td>3</td>
<td>5 * 8</td>
<td>60 kg</td>
</tr>
<tr>
<td>4</td>
<td>4 * 8</td>
<td>65 kg</td>
</tr>
</table>
</div>
</div>

I add Jquery CDN, and change your javascript.
I hope you understand it.
$(document).ready(function () {
$("div div button").click(function () {
$(this).addClass("activeButton");
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.btn {
display: flex;
justify-content: center;
}
button {
padding: 10px 20px;
margin: 5px;
background-color: black;
color: #fff;
border: none;
border-radius: 5px;
}
.topnav {
overflow: hidden;
background-color: blue;
flex-wrap: wrap;
}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: white;
}
.topnav a.active {
background-color: red;
color: white;
}
.activeButton {
background-color: #4cae4c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="card">
<div class="topnav">
Home
A
B
C
<a class="active" href="leg day d.html">D</a>
E
</div>
</div>
<div class="card">
<h1>Day 1</h1>
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Deadlift</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div id="btn">
<button id="done" class="">Done</button>
</div>
<table>
<tr>
<th>Week</th> <th>Set X Rep</th> <th>Weight</th>
</tr>
<tr>
<td>1</td> <td>4 * 8</td> <td>60 kg</td>
</tr>
<tr>
<td>2</td> <td>5 * 8</td> <td>65 kg</td>
</tr>
<tr>
<td>3</td> <td>5 * 8</td> <td>70 kg</td>
</tr>
<tr>
<td>4</td> <td>4 * 8</td> <td>75 kg</td>
</tr>
</table>
</div>
<div class="card">
<h1>Day 2</h1>
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Push Up</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div id="btn">
<button id="done" class="">Done</button>
</div>
<table>
<tr>
<th>Week</th> <th>Set X Rep</th> <th>Weight</th>
</tr>
<tr>
<td>1</td> <td>4 * 8</td> <td>60 kg</td>
</tr>
<tr>
<td>2</td> <td>5 * 8</td> <td>65 kg</td>
</tr>
<tr>
<td>3</td> <td>5 * 8</td> <td>70 kg</td>
</tr>
<tr>
<td>4</td> <td>4 * 8</td> <td>75 kg</td>
</tr>
</table>
</div>
<div class="card">
<h1>Day 3</h1>
<img src="images/deadlift.jpeg" style="width:100%">
<h1>1. Jump</h1>
<p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
<div id="btn">
<button id="done" class="">Done</button>
</div>
<table>
<tr>
<th>Week</th> <th>Set X Rep</th> <th>Weight</th>
</tr>
<tr>
<td>1</td> <td>4 * 8</td> <td>60 kg</td>
</tr>
<tr>
<td>2</td> <td>5 * 8</td> <td>65 kg</td>
</tr>
<tr>
<td>3</td> <td>5 * 8</td> <td>70 kg</td>
</tr>
<tr>
<td>4</td> <td>4 * 8</td> <td>75 kg</td>
</tr>
</table>
</div>

Fix table head while scrolling tbody and thead column aligned to tbody column

Here is table with fixed outer height, and i need when scroll start, thead will be fixed and tbody will be scroll that show heading of each column.Is there any idea to fix heading of table on top and inner content of table will be scroll.
.max_height{max-height:100px;overflow:auto;}
<div class="max_height">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr> <tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Check this with updated css
.max_height{margin:0px;max-width:450px;}
table thead,table tbody{
display:block;
}
table tbody{
max-height:100px;
overflow:auto;
}
table tr{
display:table;
width:100%;
table-layout:fixed;
}
<div class="max_height">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr> <tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Overflow hidden and scroll same time

How can I create two independent containers with fixed headers and scrollable body like this i have manage to create fixed table headers but i couldn't create scrollable body that both can scroll same time at vertically and only one can scroll horizontally.
Left side tree table and gantt chart both can be scroll horizontally, but right side Gantt chart only scrolls vertically.
Please check my code below, i hace acchived almost what i want, but i neet to fix two things
1) Need to fix the Header on table B but without breaking horizontal scroll behavior
2) How can Make both A & B vertical scrolls can happen at syncrounasly at same time, like when someone scrolls Table A table b alsp needto be scroll at the same time in vertically only.
like this link http://www.bryntum.com/playpen/react/ (add some task to activate the scroll)
PLEASE CHECK THIS CODE SNIPPET IN FULL PAGE
th, td{
padding: 10px 20px;
width: 100px;
}
th{
background: #fff;
}
td{
background: #efefef;
}
.fl{
float: left;
}
.panel_body{
height: 200px;
width: 430px;
overflow: hidden;
overflow-y:scroll;
}
.panel_body.scroll_h{
overflow-x: scroll;
width: 300px;
height: 240px;
}
.scroll_h table{
width: 500px;
}
<div class="panel">
<div class="fl panel_left">
<header>
<table>
<thead>
<tr>
<th>Table A</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
</table>
</header>
<section class="panel_body">
<table>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</div>
<di class="fl panel_right">
<section class="panel_body scroll_h">
<table>
<thead>
<tr>
<th>Table B</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</di>
</div>
With css and | or Js.

Define a width and height to the scrollable element.
Then use the overflow property:
#container {
width: 200px;
height: 200px;
overflow: scroll;
}
#container div {
width: 100%;
height: inherit;
}
#a { background: cornflowerblue; }
#b { background: brown; }
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
You can set a horizontal/vertical scroll with overflow-x/overflow-y.
see MDN - overflow
PS: but please search for existing questions (and answers), post some code,etc. Here's an example but it will never fit your actual project.

HTML Table Outside border multiple TR

I have a html table and it haves some rows with rowspan, The simple border of the td is 1px solid black, but I need to make a thicker border on the Row group with rowspan. Sorry for my English, I'm going to add an image to be more clear.This is how I need to make the table:
I tryed to add
table tr{
border: 2px solid black;
}
But it make thicker the rows without rowspan too.
Does somebody have a solution in CSS or JS?
table{
border-collapse: collapse;
text-align: center;
}
table td, table th{
border:1px solid black;
padding: 0px 14px;
}
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</table>

If you can modify your actual markup you can use multiple tbody elements, and then style:
table {
border-collapse: collapse;
text-align: center;
}
table td,
table th {
border: 1px solid black;
padding: 0px 14px;
}
table tbody {
border: 4px solid black;
}
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</tbody>
</table>
If you can't modify your actual markup and you can use Jquery you can make it this way:
$(document).ready(function() {
//Remove the actual tbody
$('tr').unwrap();
//Give the th a thead element
$('th').first().parent('tr').wrap('<thead></thead>');
//Evaluate wich td has rowspan and wrap on tbody based on number of rowspans
$('td').each(function() {
if ($(this).attr("rowspan") != undefined) {
var numb = parseInt($(this).attr("rowspan"), 10),
par = $(this).parent('tr').index('tr');
$("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
}
})
})
Check the Snippet
$(document).ready(function() {
$('tr').unwrap();
$('th').first().parent('tr').wrap('<thead></thead>');
$('td').each(function() {
if ($(this).attr("rowspan") != undefined) {
var numb = parseInt($(this).attr("rowspan"), 10),
par = $(this).parent('tr').index('tr');
$("tr").slice(par, par + numb).wrapAll('<tbody></tbody>')
}
})
})
table {
border-collapse: collapse;
text-align: center;
}
table td,
table th {
border: 1px solid black;
padding: 0px 14px;
}
table tbody {
border: 4px solid purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td rowspan="3">val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
<tr>
<td>val</td>
<td>val</td>
</tr>
</table>

Snap to div horizontal on slide or swipe

I have a horizontal set of Divs each holding a score table from a game. The intent is to have the user on a phone slide / swipe the game table and when the user removes his finger, the program will snap to the next div. For example, if Game 1 appears, the user swipes quickly and lifts the finger when Game 1 and Game 2 are both showing, the program will advance to Game 2, not continuing sliding. The code is below and a demo here. Any and all help appreciated.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css" media="screen">
table.swingTable {
border-collapse: collapse;
font-size: 12px;
margin: 0px 0px 20px;
/* original: margin: 10px 10px 20px; */
text-align: left;
width:100%;
}
table.swingTable thead th.rounded-company {
background: #ccc;
}
table.swingTable thead th.rounded-q4 {
background: #ccc;
}
table.swingTable th {
background: none repeat scroll 0 0 #CCCCCC;
color: #222222;
font-size: 11px;
/*font-size: 10px;*/
font-weight: bold;
padding: 6px;
/*padding: 8px;*/
text-transform: uppercase;
}
/*table.swingTable th#hole-shot{ width: 50;}*/
table.swingTable td {
background: none repeat scroll 0 0 #eee;
border-top: 1px solid #FFFFFF;
color: #333;
padding: 8px;
}
table.swingTable tfoot td.rounded-foot-left {
background: #eee;
}
tabletfoot.swingTable td.rounded-foot-right {
background: #eee;
}
table.swingTable tbody tr:hover td {
background: none repeat scroll 0 0 #ddd;
}
.slideContainer {
white-space: nowrap;
}
.horizontal{
display: inline-block;
margin:0 auto;
border:2px solid;
/*border-radius:25px;*/
white-space: normal;
width: 100%;
/*left:0;right:0; */
}
</style>
<script>
$(document).ready(function()
{
}); // end main
</script>
</head>
<body>
<div class="slideContainer">
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 1</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable" >
<caption><strong>Game 2</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 3</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable" >
<caption><strong>Game 4</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable" >
<caption><strong>Game 5</strong></caption>
<tr>
<th>Swing#</th>
<th>start</th>
<th>H-Dis</th>
<th>S-Dis</th>
<th>SG</th>
<th>Flags</th>
</tr>
<tr>
<td>1</td>
<td>T</td>
<td>400</td>
<td>300</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>F</td>
<td>100</td>
<td>90</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>G</td>
<td>10</td>
<td>10</td>
<td>SG</td>
<td>HO</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Categories