I am trying to make a transition for table body when I hover over it such that it disappears and the only thing left in the table is the table head. I am new at transitions so maybe I'm doing it wrong. What i expected was the table body slowly going up until 0px, but it doesn't. Also i need to use only CSS. Can you help me? Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: red;
}
table,
th {
border: 3px solid black;
}
tr {
background: #FFFF66;
}
tbody {
color: blue;
transition: max-height 2s;
}
tbody:hover {
transition: max-height 2s ease;
max-height: 0px;
}
</style>
</head>
<body>
<h2>Most Watched Shows:</h2>
<table width="70%">
<thead>
<tr>
<th>Top 5</th>
<th>6-10</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
</td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
</td>
</tr>
<tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
</td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
</td>
</tr>
<tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
</td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
</td>
</tr>
<tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
</td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
</td>
</tr>
<tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
</td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I tried something different and I applied a div for table data td and it works :D
<!DOCTYPE html>
<html>
<head>
<style>
thead {
color: red;
}
table,
th {
border: 3px solid black;
border-collapse: collapse;
}
tr {
background: #FFFF66;
}
td {
border: 1px solid red;
}
div {
transition: max-height 1.5s ease;
overflow: hidden;
max-height: 50px;
}
table:hover div {
transition: max-height 2s ease;
max-height: 0px;
}
</style>
</head>
<body>
<h2>Most Watched Shows:</h2>
<table width="70%">
<thead>
<tr>
<th>Top 5</th>
<th>6-10</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a>
</div>
</td>
<td>
<div>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a>
<div>
</td>
</tr>
<tr>
<td>
<div>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a>
</div>
</td>
<td>
<div>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a>
<div>
</td>
</tr>
<tr>
<td>
<div>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a>
<div>
</td>
<td>
<div>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a>
<div>
</td>
</tr>
<tr>
<td>
<div>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a>
<div>
</td>
<td>
<div>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a>
<div>
</td>
</tr>
<tr>
<td>
<div>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a>
<div>
</td>
<td>
<div>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a>
<div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
Is there a way to make the second table borders look the same as the first table?
table {
border: 1px solid black;
}
.top {
border-top: 1px solid black;
}
.bottom {
border-bottom: 1px solid black;
}
.right {
border-right: 1px solid black;
}
.left {
border-left: 1px solid black;
}
#fin td,
#fin tr {
padding: 0;
}
#fin tr{
border: 1px solid black;
}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr class='top'><!--
--><td class='top left'>HTML</td><!--
--><td class = 'top right'>★★★★★</td><!--
--><td class='top left'>Javascript</td><!--
--><td class='top right'>★</td><!--
--></tr><!--
--><tr class='bottom'><!--
--><td class='bottom left'>CSS</td><!--
--><td class = 'bottom right'>★★</td><!--
--><td class='bottom left'>Node</td><!--
--><td class='bottom right'>★</td><!--
--></tr>
</table>
<hr>
My Hobbies
Contact Me
I would play with pseudo element
table {
border: 1px solid black;
}
td[class] {
position: relative;
padding: 4px;
}
td[class]::before,
td[class]::after{
content:"";
position: absolute;
inset: var(--t,0) var(--r,0) var(--b,0) var(--l,0);
pointer-events: none;
border: solid black;
border-width: var(--w,0);
}
td[class]::after {
inset: var(--t,2px) var(--r,2px) var(--b,2px) var(--l,2px);
}
.top-left {--w: 1px 0 0 1px;--b:-4px;--r:-4px;}
.top-right {--w: 1px 1px 0 0;--b:-4px;--l:-4px;}
.bottom-left {--w: 0 0 1px 1px;--t:-4px;--r:-4px;}
.bottom-right {--w: 0 1px 1px 0;--t:-4px;--l:-4px;}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr>
<td class='top-left'>HTML</td>
<td class='top-right'>★★★★★</td>
<td class='top-left'>Javascript</td>
<td class='top-right'>★</td>
</tr>
<tr>
<td class='bottom-left'>CSS</td>
<td class='bottom-right'>★★</td>
<td class='bottom-left'>Node</td>
<td class='bottom-right'>★</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
I made some changes to your code, and now they look the same. However, please be aware that I removed the "fin" id from the second table. So I suggest you choose a new ID for that one and start from there.
(I did not touch any of the CSS, essentially I just copied the first table over so they both look the same)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table border="1">
<tr>
<td>
<table >
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
</body>
</html>
If you match the structure of your second table to your first it should work. I have added a css class so as to not repeat the border style.
<style>
#borderForTable{
border:1px solid black
}
#borderForTD{
border:2px double black
}
</style>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
I'm trying to put some box-shadow on some columns group of my html table but I'm getting an overlay of box-shadow on every <td>. (In my context, I can't split my table)
html :
<table>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
css :
table {
margin: 50px;
border-collapse: collapse;
}
td:not(.transparent) {
padding: 2em;
box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td.transparent {
padding: 1em;
}
Actual look :
Wanted look :
It's kind of a hack but it ends up similar to what you want.
I added a span to each td.
The logic is to have a :before element to cover the inner td space with white (background). The span meant to bring the text one layer ahead.
So the layers are
Shadow (td) z-index: 0
White cover (:before) z-index: 1
Text (span) z-index: 2
table {
margin: 50px;
border-collapse: collapse;
}
td {
padding: 2em;
position: relative;
}
td:not(.transparent) {
box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td:not(.transparent):before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1;
}
td:not(.transparent) span {
position: relative;
z-index: 2;
}
td.transparent {
padding: 1em;
}
<table>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
</table>
I want to have 2 different #page and #media print styles in one CSS file. It could be separate as well. Why I require 2 is I am printing out bar-codes and the page needs to be different sizes when printing. Currently whats happening is its using style 1 styling for both bar-codes. How do I set it were it only uses style 1 styling for Barcode1 and style 2 for Barcode2.
Code:
CSS
**style 1**
#page { size: 8cm 3cm; margin-top: 16px; } /* output size */
body.receipt1 .sheet1 { width: 10cm; height: 3cm; margin-left: 35px; } /* sheet size */
#media print { body.receipt1 { width: 3cm } } /* fix for Chrome */
**style 2**
#page { size: 10cm 5cm; margin-top: 16px; } /* output size */
body.receipt2 .sheet2 { width: 12cm; height: 5cm; margin-left: 35px; } /* sheet size */
#media print { body.receipt2 { width: 5cm } } /* fix for Chrome */
Barcode1
<body className="receipt1">
<section className="sheet1">
<table className="table_b10">
<tbody>
<tr>
<td className="heading1_b10">Worksgroup</td>
</tr>
<tr>
<td className="heading2_b10">SKU: {this.props.stateInfo.itemName}</td>
</tr>
<tr>
<td className="heading2_b10">
<Barcode value={this.props.stateInfo.itemName} width={1} height={30} fontSize={0} margin={0} format="CODE128" />
</td>
</tr>
<tr>
<td className="heading2_b10">{this.props.stateInfo.itemDescription}</td>
</tr>
<tr>
<td className="heading2_bb10">LOG-ID: {this.props.audit.id}</td>
</tr>
</tbody>
</table>
</section>
</body>
Barcode2
<body class="receipt2">
<section class="sheet2">
<table className="table_b5">
<tbody>
<tr>
<td className="heading1_b5">Worksgroup</td>
</tr>
<tr>
<td className="heading2_b5">Job No\PO:</td>
</tr>
<tr>
<td className="heading3_b5">{this.props.job.jobNumber}</td>
</tr>
<tr>
<td className="heading2_b5">SKU:</td>
</tr>
<tr>
<td className="heading3_b5">{this.props.stateInfo.itemName}</td>
</tr>
<tr>
<td className="heading3_b5">
<Barcode value={this.props.stateInfo.itemName} width={0.75} height={25} fontSize={0} margin={0} format="CODE128" />
</td>
</tr>
<tr>
<td className="heading3_b5">{this.props.stateInfo.itemDescription}</td>
</tr>
<tr>
<td className="heading3b_b5">LOG-ID: {this.props.audit.id}
</td>
</tr>
</tbody>
</table>
</section>
</body>
I'm having trouble with breaking table, to be more responsive.
Please take a look at this pictures, and tell me how to do it with css.
you may reset display and use the flex model :
/* break table */
tr {
display: flex;
flex-wrap: wrap;
width: 100%;
}
td {
display: block;
width: 50%;
text-align: center;
}
td[colspan] {
width: 100%;
}
/* demo purpose */
table {
counter-reset: tds;
counter-increment: tds -1;
width: 100%;
}
td {
border: solid 1px;
}
td:before {
counter-increment: tds;
content: 'TD 'counter(tds);
}
body {
width: 500px;
margin: auto;
}
* {
box-sizing: border-box;
}
<table>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Use mediaqueries to update display whenever you need it to happen. DEMO
I think this will help you.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table responsive</title>
<style>
body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
table {
width:100%;
text-align:center;
}
td {
border-bottom:1px solid #ccc;
padding:10px 0;
}
#media (max-width:600px) {
table {
display:block;
width:100%;
padding:0;
margin:0 auto;
}
tbody, tr {
display:block;
width:100%;
}
table td {
display:inline-block;
float:left;
width:50%;
}
td[colspan="2"] {
display:block;
width:100%;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>TD00</td>
<td>TD01</td>
<td colspan="2">Colspan 2</td>
<td colspan="2">Colspan 2</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
<tr>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
<td>TD00</td>
</tr>
</table>
</body>
</html>
I don't think that it is possible to break a table just using CSS. In order to do what you want you'd need to use JS and according to the window's width you would re-structure your table.
However, if you are just searching to make your site more responsive, you have some interesting techniques here: https://css-tricks.com/responsive-data-table-roundup/
Not really possible without JavaScript, you can't style table column breaks.
Other option could be to redo table to div's using flexbox grid.
please try this one
<style type="text/css">
td {
border: 1px solid;
text-align: center;
}
.t1{
margin: 0 auto;
text-align: center;
min-width: 600px;
}
.t2{
margin: 0 auto;
text-align: center;
display: none;
}
#media (max-width: 600px){
.t1{display: none;}
.t2{display: table;width: 100%;}
}
</style>
HTML
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td colspan="2">sds</td>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td>sds</td>
<td>dsdd</td>
<td>sds</td>
<td>dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td colspan="2">sds</td>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
<td>sds</td>
<td>dsdd</td>
<td>sds</td>
<td>dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
</tr>
<tr>
<td colspan="2">sds</td>
</tr>
<tr>
<td colspan="2">dsdd</td>
</tr>
<tr>
<td>dsds</td>
<td>dsdsd</td>
</tr>
This is not what tables are for. You could hack the tables styles but that's bad practise. Easier would be using for example:
older bootstrap grid - https://getbootstrap.com/
or better flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Editing table, tr, tbody and others display is bad practice as well, it will destroy it's functionality (vertical alignment and many others). Just use divs and style them as your responsive table. Best would be styling them with flexbox or at least bootstrap grid.
I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.
<div id="table-wrapper">
<div id="table-scroll">
<table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Status</th>
<th>Vol Number</th>
<th>Bonus Paid</th>
<th>Reason for no Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><%=snd.getOrderId()%></td>
<td><%=snd.getDateCaptured()%></td>
<td><%=snd.getOrderStatus()%></td>
<td>Data Not Available</td>
<td>Data Not Available</td>
<td>Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
Below is my CSS, which I am using for the above div:
#table-wrapper {
position:relative;
}
#table-scroll {
height:250px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
How about doing something like this? I've made it from scratch...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;
Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;
Demo
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
Using position: sticky on th will do the trick.
Note: if you use position: sticky on thead or tr, it won't work.
https://jsfiddle.net/hrg3tmxj/
Some of these answers seem unnecessarily complex. Make your tbody:
display: block; height: 300px; overflow-y: auto
Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.
None of the other examples provided worked in my case - e.g. header would not match table body content when scrolling. I found a much simpler and clean way, allowing you to setup the table the normal way, and without too much code.
Example:
.table-wrapper{
overflow-y: scroll;
height: 100px;
}
.table-wrapper th{
position: sticky;
top: 0;
background-color: #FFF;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Thanks to https://algoart.fr/articles/css-table-fixed-header
I think you need something like this ?
.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid grey;}
</style>
<table class="table">
<thead>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
<th>Judul4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="table-wrap" >
<table class="table-dalam">
<tbody>
<?php foreach(range(1,10) as $i): ?>
<tr >
<td class="td-nya">td1 </td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Source
I needed the same and this solution worked the most simple and straightforward way:
http://www.farinspace.com/jquery-scrollable-table-plugin/
I just give an id to the table I want to scroll and put one line in Javascript. That's it!
By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.
This is my "crutches" solution by using html and css.
There used 2 tables and fixed width of tables and table cell`s
https://jsfiddle.net/babaikawow/s2xyct24/1/
HTML:
<div class="container">
<table class="table" border = 1; > <!-- fixed width header -->
<thead >
<tr>
<th class="tbDataId" >№</th>
<th class="tbDataName">Працівник</th>
<th class="tbDataData">Дата</th>
<th class="tbDataData">Дійсно до</th>
<th class="tbDataDiseases">Критерій1</th>
<th class="tbDataDiseases">Критерій2</th>
<th class="tbDataDiseases">Критерій3</th>
<th class="tbDataDiseases">Критерій4</th>
<th class="tbDataDiseases">Критерій5</th>
</tr>
</thead>
</table>
<div class="scrollTable"> <!-- scrolling block -->
<table class="table" border = 1;>
<tbody>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
.container{
width:1000px;
}
.scrollTable{
overflow: scroll;
overflow-x: hidden;
height: 100px;
}
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse;
}
/* Styles of the th and td */
/* Id */
.tbDataId{
width:5%;
}
/* Дата,
Дійсно до */
.tbDataData{
/*width:170px;*/
width: 15%;
}
/* П І Б */
.tbDataName{
width: 15%;
}
/*Критерії */
.tbDataDiseases{
width:10%;
}
A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this
http://css-tricks.com/persistent-headers/
This code works form me. Include the jquery.js file.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){
var contentDivId = "contentDiv";
var headerDivId = "headerDiv";
var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings');
/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/
fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
/*Start : Place header row cell and content table first row cell inside <DIV>*/
var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
for (k = 0; k < contentFirstRowCells.length; k++) {
$( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
}
var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
for (k = 0; k < headerFirstRowCells.length; k++) {
$( headerFirstRowCells[k] ).wrapInner( "<div></div>");
}
/*End : Place header row cell and content table first row cell inside <DIV>*/
/*Start : Fix width for columns of header cells and content first ror cells*/
var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
for (i = 0; i < contentColumns.length; i++) {
if (i == contentColumns.length - 1) {
contentCellWidth = contentColumns[i].offsetWidth;
}
else {
contentCellWidth = contentColumns[i].offsetWidth;
}
headerCellWidth = headerColumns[i].offsetWidth;
if(contentCellWidth>headerCellWidth){
$(headerColumns[i]).css('width', contentCellWidth+"px");
$(contentColumns[i]).css('width', contentCellWidth+"px");
}else{
$(headerColumns[i]).css('width', headerCellWidth+"px");
$(contentColumns[i]).css('width', headerCellWidth+"px");
}
}
/*End : Fix width for columns of header and columns of content table first row*/
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
}
function radioCount(){
alert(document.form.elements.length);
}
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
<td><div>Firstname</div></td>
<td><div>Lastname</div></td>
<td><div>Points</div></td>
</tr>
<tr>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr-->
<tr id="tableColumnHeadings" class="tableColumnHeadings">
<td> </td>
<td>Firstname</td>
<td>Lastname</td>
<td>Points</td>
</tr>
<tr style="height:0px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
<td>Jillsddddddddddddddddddddddddddd</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</form>
</body>
</html>
use StickyTableHeaders.js for this.
Header was transparent . so try to add this css .
thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
I know this question is old, but if anyone have this same issue, an easy way without having to write lots of CSS, just wrap your <table> with <div> and your <div> should have a style with overflow-y: auto; and some height.
As below example:
<div style="overflow-y: auto; height: 400px;">
<table>...</table>
</div>
Add a style to the thead as below:
thead {
position: sticky;
top: 0;z-index: 2;
}