I need to set scroll for tbody if number of records will be more that time I view the records by using scroll bar.
For that I have used vertical scrollbar for the tbody of the table. Scrollbar is working correctly in that case that all
column values(tbody) are coming under the single th column.
How to resolve this one? In this sample I have used css for tbody
tbody {
height: calc(100vh - 340px);
display: block;
width: 100%;
overflow-y: auto;
}
Remove one line from your css
tbody {
height: 100%;
display: block;//<--- Remove this line
width: 100%;
overflow-y: auto;
}
Add this in your css class. this will work.
table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:50px;
overflow:auto;
height: calc(100vh - 360px);
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width:400px;
}
updated js fiddle
https://jsfiddle.net/vinothsm92/pL1wqaj1/12/
Check with this :
tbody {
position: absolute;
width: 100%;
height: 400px;
overflow: hidden;
overflow-y: scroll;
}
and remove
.scrollbar {
height: 450px;
overflow-y: auto; // Remove this line
}
Related
I am working in Angular Project but stuck in a design Issue
I am want to scroll the body of the table making body header fixed
I tried to do the at but not able to scroll just table body
My code and design is ready I have put it in below link -
https://stackblitz.com/edit/angular-x8c89j?file=src%2Fapp%2Fapp.component.html
Please update your table style as below
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table;
width: calc(100% - 17px);
}
tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
th, td {
padding: 5px;
word-break: break-all;
}
tr {
display: table;
width: 100%;
box-sizing: border-box;
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}
tr th:first-child,
tr td:first-child {
width: 100px;
}
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
I have a table that is contained in a parent div. The issue I'm seeing is that when the table contains data that is larger than the parent, it will expand past the parent.
Here's a fiddle, basically everything needs to be contained in the blue box. (more information below)
http://jsfiddle.net/CjX2v/7/
table {
background-color: red;
height: 100%;
width: 100%;
max-width: 100%;
max-height:100%;
}
table > tbody > tr:first-child {
background-color: green;
height: 20px;
}
div {
background-color: blue;
width:500px; /* This value is not known, supplied by user */
height: 500px; /* This value is not known, supplied by user */
display: inline-block;
}
overflow:hidden will not work as there is text contained in the table that needs to be visible.
I figure it's a pretty straightforward issue, but if you need more information, let me know.
OK I think this is what you're trying to do.
Click here for the example: JS FIddle
In order to get the children scrollable in the parent you have to set the overflow of the fixed element.
overflow: auto;
In my example <div class="main"> is the parent and fixed element so the css looks like this.
.main {
background: black;
width: 250px;
height: 250px;
padding: 40px;
overflow: auto;
}
.child1 {
width: 400px;
height: 400px;
background: red;
padding: 20px;
}
p {
float: right;
}
.child2 {
width: 300px;
height: 300px;
background: green;
padding: 40px;
margin: 0 auto;
margin-top:20px;
}
I'm working on a page that can hold very big content. It could easily grow to (and over) 10.000px in width. I simply want my page to stretch along.
This should be very simple, and I can fix it with display: table-cell, but it doesn't 'smell' as the right answer. It feels like a hack. I think I'm missing something crucial.
Fiddle
CSS:
#container { white-space: nowrap; padding: 50px; background-color: green; }
#container > div { display: inline-block; width: 200px; height: 200px; }
#container > div:nth-child(2n+1) { background-color: red; }
body { background-color: #ccc; }
HTML:
<div id="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Why isn't the container div stretching to its content?
BODY is correctly stretched, so how do I force my container div to take the width of its parent or children?
try something like this
#container {
background-color: #008000;
display: table;
padding: 50px;
white-space: nowrap;
}
EDITED
#container {
background-color: #008000;
display: inline-block;
padding: 50px;
white-space: nowrap;
}
DEMO
Add overflow-x: scroll; to #container. Is that what you want?
Edit: changed to overflow-x :)
CSS
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
overflow-x: scroll;
}
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
display:table;
}
#container > div {
display: inline-block;
width: 200px;
height: 200px;
display:table-cell;
}
add the line overflow-x: scroll; to your container-css
here is a jsfiddle as well
below works in chromer, Firefox but not in IE8
Can anyone tell me why?
table {
table-layout:fixed;
}
tbody {
height: 520px;
overflow: auto;
}
table td {
min-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
text-align:center;
}
thead > tr, tbody{
display:block;
}
In IE8 tbody is not scrollable so use:
position: absolute;
and then use margin andpaddings for the divs etc.