I have a big table inside a div that has a overflow-auto defined. Still I can get only a vertical scrollbar visible. The horizontal scrollbar is at the bottom at the div, which makes it quite inconvenient to use. Any ideas what is happening here?!
How about something like this?
$("#scrollbar").on("scroll", function(){
var container = $("#container");
var scrollbar = $("#scrollbar");
ScrollUpdate(container, scrollbar);
});
function ScrollUpdate(content, scrollbar){
$("#spacer").css({"width":"500px"}); // set the spacer width
scrollbar.width = content.width() + "px";
content.scrollLeft(scrollbar.scrollLeft());
}
ScrollUpdate($("#container"),$("#scrollbar"));
$("#tab").tableHeadFixer({
"left": 1,
"right": 0,
"head": true
});
#container {
width: 300px;
height: 300px;
background: green;
overflow-x: hidden !important;
overflow-y: auto;
position: absolute;
left: 0px;
top: 0px;
}
#scrollbar {
position: fixed;
left: 0px;
bottom: 0px;
width: 300px;
overflow-x: scroll;
overflow-y: hidden;
z-index: 10;
}
#spacer {
height: 1px;
}
#tab {
width: 500px;
height: 500px;
background: #CCCCCC;
}
tr,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div id="scrollbar"><div id="spacer"></div></div>
<div id="container">
<table id="tab">
<thead>
<tr>
<th>Title</th>
<th>Name</th>
<th>History</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
Related
I have applied following CSS to my table.
thead, tbody
{
display: block;
}
tbody
{
height: 200px;
overflow-y: auto;
overflow-x: auto;
}
The objective is to make the thead fixed, and keep tbody scrolling. Before applying the above CSS, thead and tbody content was alligned properly. But after putting the CSS, the content is mis-aligned. Even tr elements doesn't fill the entire space of their container. Can someone help me with this? Any help will be appreciated.
try this code for sticky header and scrollable body for table. hope will work for you.
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
th{
position: sticky;
position: -webkit-sticky;
top: -1px;
z-index: 999;
background-color: #000;
color:white;
}
.sticky-table {
height: 200px;
overflow: auto;
}
<div class="sticky-table">
<table>
<tr>
<th>First Name</th>
<th>m-1</th>
<th>m-2</th>
</tr>
<tr>
<td>user 1</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>user 2</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>user 3</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>user 4</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>user 5</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
I have 2 columns, a fixed width column on the left and a column on right the fills the remainder of the screen, I added an element inner-scroll in the right column with overflow scroll but the scroll doesn't display, the parent column is just expanded which creates a scroll for the entire window.
I can't add overflow: scroll to the right-column class because I don't want the top bar above the inner scroll element to be inside the scroll, I could fix position it to the top of the inner element but I'd rather get it working by having the inner element show a scroll.
https://stackblitz.com/edit/2-column-fixed-flex
How can I get the inner element to scroll?
.container {
display: flex;
height: 100vh;
max-width: 100vw;
}
.left-column {
flex: 0 0 200px;
background: lightcoral;
}
.right-column {
flex-grow: 1;
background: lightgreen;
}
.inner-top-bar {
background: lightskyblue;
padding: 10px;
}
inner-right-column {
position: relative;
overflow: scroll;
}
Because of too much content, right column fall out from viewport. You must limit .right-column width to display scroll. For example width: calc(100% - 200px)
Result
.container {
display: flex;
height: 100vh;
max-width: 100vw;
}
.left-column {
flex: 0 0 200px;
background: lightcoral;
}
.right-column {
/* flex-grow: 1; */
width: calc(100% - 200px);
background: lightgreen;
}
.inner-top-bar {
background: lightskyblue;
padding: 10px;
}
.inner-scroll {
position: relative;
overflow-x: scroll;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
td {
padding: 5px 15px;
width: 90px;
text-align: left;
vertical-align: middle;
border: 1px solid #eee;
}
body {
margin: 0;
}
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="inner-top-bar">non-scroll top</div>
<div class="inner-scroll">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</div>
</div>
</div>
The problem in your code is that you have given the width for the .left-column flex using the flex:0 0 200px hence it takes 200px everytime. But u havent given the next flex a width at all hence it takes until the division ends and the overflow doesnt work. I have added the left and rightcolumnsome width and then ive added the overflow and it works.
hope this is what you are looking for.
.container {
display: flex;
height: 100vh;
max-width: 100vw;
}
.left-column {
flex: 0 0 200px;
background: lightcoral;
}
.right-column {
width: calc(100% - 200px);
background: lightgreen;
}
.inner-top-bar {
background: lightskyblue;
padding: 10px;
}
.inner-scroll {
position: relative;
overflow-x: scroll;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
td {
padding: 5px 15px;
width: 90px;
text-align: left;
vertical-align: middle;
border: 1px solid #eee;
}
body {
margin: 0;
}
<div class="container">
<div class="left-column"></div>
<div class="right-column">
<div class="inner-top-bar">non-scroll top</div>
<div class="inner-scroll" style="overflow-x:auto;">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</div>
</div>
</div>
I am currently working on a table that will be filled with over 500 records and has a lot of headers. I have managed to get most of it done, but the problem is that I cannot seem to get the header and footer to scroll with the table horizontally as well as being sticky headers/footers.
Essentially: I want the header/footer to be sticky vertically but not horizontally. Is that possible in CSS only?
Here is a link to a jsFiddle showing off the problem I am having: https://jsfiddle.net/j8rd9jpj/14/
I have found some questions/solutions similar to my problem, but they were either not solved or the question didn't really apply to my situation:
Horizontal scrolling on table with fixed header
Fixed header table with horizontal scrollbar and vertical scrollbar on
I am trying to solve this issue using CSS only, the table HTML is fixed and I can't really add extra divs for the footer or header .
I am thinking the issue is that the scroll bar is inside the table vs outside of it, but I am not sure how to approach this problem
My HTML:
<div id="main">
<table id="tableData">
<thead>
<tr>
<th>Something 1</th>
<th>Something 2</th>
<th>Something 3</th>
<th>Something 4</th>
<th>Something 5</th>
<th>Something 6</th>
<th>Something 7</th>
<th>Something 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
....
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Something 1</th>
<th>Something 2</th>
<th>Something 3</th>
<th>Something 4</th>
<th>Something 5</th>
<th>Something 6</th>
<th>Something 7</th>
<th>Something 8</th>
</tr>
</tfoot>
</table>
</div>
My CSS:
body {
overflow: hidden;
}
#main {
overflow: scroll;
display: table;
max-height: 200px;
}
#tableData {
table-layout: fixed;
margin: auto;
width: 100%;
overflow-x: auto;
}
#tableData>tbody>tr>td {
width: 120px;
padding: 1px 8px 8px 1px;
word-wrap: break-word;
}
#tableData thead,
#tableData tfoot {
display: table;
width: 100%;
}
#tableData tbody {
height: 100px;
overflow: auto;
display: block;
width: 100%;
}
#tableData tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#tableData th {
min-width: 120px;
}
Thank you!
#tableData {
table-layout:fixed;
margin:auto;
width:100%;
overflow-x:auto;
max-height: 200px;
display: block;
}
#tableData > tbody > tr > td {
width: 120px;
padding: 1px 8px 8px 1px;
word-wrap:break-word;
}
#tableData thead, #tableData tfoot {
display:table;
width:100%;
}
#tableData tbody {
overflow: auto;
display: block;
width: 100%;
}
#tableData tbody tr{
display: table;
width: 100%;
table-layout: fixed;
}
#tableData th {
min-width: 120px;
}
I am using the following CSS and bootstrap 3 to make a table cell vertically scrollable
#scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
<table table table-condensed table-hover style="table-layout: fixed;" >
<tr>
<td>
<div id="scrollable">something .................................long</div>
</td>
</tr>
</table>
It appears to only scroll horizontally (just not in this snippet). I have tried to play with the above constraints, but no luck. Any suggestions ?
Use overflow-y
#scrollable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-y: auto;
overflow-x: hidden;
}
This Is Example For Your Question .
#scrollable {
---------------
---------------
---------------
overflow-y: auto;
overflow-x: hidden;
}
First make your table body and table header to display as block then you try the overflow
check the below example...
<table>
<tableheader>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</tableheader>
<tablebody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tablebody>
</table>
CSS:
tableheader, tablebody { display: block; }
tablebody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
if you need scrollbar in the cell which contains too large data please use the following in HTML table data tag
<td width="500" height="300">
<div style="width: 500px; height: 300px; overflow-y: auto; overflow-x: hidden;">
if the cell contains too large data it will appear the scrollbar
</div>
</td>
I have to make in html a calendar. I want to make this with tables.
All I want is the "2" to be in the same line with the others elements(3,4,5...etc).
Code:
<table class="calendar-program col-md-12">
<thead>
<tr>
<th>L</th>
<th>M</th>
<th>M</th>
<th>J</th>
<th>V</th>
<th>S</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2
<div class="clearfix"></div>
<small class="event-calendar">1 event</small>
</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
CSS:
table.calendar-program >tbody> tr>td{
width: 14%;
border: 1px solid #000;
text-align: center;
}
small.event-calendar{
clear: both;
color: #000!important;
font-size: 10px;
}
Demo
You can add vertical-align: top; to the CSS for your td.
That will give you a layout like this:
You can make a nicer, more controlled result with positioning, like this: http://jsfiddle.net/B32Cc/
table.calendar-program >tbody> tr>td{
width: 14%;
border: 1px solid #000;
text-align: center;
position: relative;
padding: 10px 15px;
}
small.event-calendar{
clear: both;
color: #000!important;
font-size: 10px;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
}