I have that which thead is fixed o top and the tbody shows a vertical scroll with this css
thead{
display: block;
}
tbody {
display:block;
height:500px;
overflow:auto;
}
But the problem is that the thead fields width are not adjusted to the tbody fields width
Hoy I can make that the head and the body fields to have the same width?(without the css it have the same width)
Try
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
thead{
display: block;
}
tbody {
position:absolute;
display:block;
height:500px;
Width:200px;
}
try this...
Related
I am trying for a vertical scroll bar inside tbody with a fixed header. I tried solution provided in the link.
HTML table with 100% width, with vertical scroll inside tbody
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
It works fine if scroll bar appears.But if the rows are few and the scroll bar doesn't appear, then thead is not aligned with tbody. How can I fix the issue with css?
Once your tbody data move-out from assigned height, your y-axis get's activated.
tbody {
height: 50px;
display: inline-block;
width: 100%;
overflow-y:scroll;
}
That's because the CSS above reduces the width of the thead tr's width to 97% or (100% - the width of the scrollbar) to accomodate for the reduced width of the tbody because of the scrollbar in tbody only. If there is no scrollbar in tbody then the tbody remains fully 100% wide but the thead is still being narrowed.
You wish to fix is with the CSS, well the CSS cannot recognize the fact that there are not enough rows to for the scrollbar to show. You will be able to fix it using JavaScript though - just look in the answer you have cited, there are examples of using JavaScript to apply the width of the tbody columns to thead just at the beginning of the answer.
EDIT
Or force vertical scrollbar at all times, such that the width of the tbody doesn't change regardless of the row count:
tbody {
# ... other attributes
overflow-y: scroll;
}
taken from:
Force Vertical Scrollbar
Use tbody max-height:100px instead of height:100px
tbody {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
I would like to be able scroll td elements (except table side column) as screen size smaller than x size..
To be more clear please check: http://jsfiddle.net/uf32ojm5/7/
How can I scroll only comments fields and let "group" column fixed..
To fix "group" column I have done this:
#media only screen and (max-width: 590px) {
.groupColm{
position:fixed;
min-width:100px;
z-index:1;
}
}
But how do I scroll only comments fields?
Thank you in advance!
I Think you have to put the comments fields in an internal table inside the td and just enable scrolling in the size you need to the content of that td which contain the internal table at that time.
hope my answer help.
I solved it:)
div table { display: block; position: relative; width: 100%; }
div tbody { display: block; width:auto; position: relative; overflow-x: auto; white-
space: nowrap; }
div thead tr { display: block; }
div th { display: block; text-align:left; padding-left:10px; height:50px; line-
height:40px;}
div tbody tr { display: inline-block; vertical-align: top; }
div td {display: block; text-align: left; }
live: http://jsfiddle.net/uf32ojm5/12/
I am trying to scroll a content child of a fixed div. I am trying to scroll without the scroll bar being visible (using the mouse scroll). I have pretty much tried all the solutions I came across on Stackoverflow and on google in general but no success.
Please find here the JSfiddle of the problem:
THE CSS:
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow: hidden;
}
nav {
position:relative;
height:100%;
overflow-x:hidden;
overflow-y:auto;
}
JS FIDDLE:
http://jsfiddle.net/5Xg5v/2/
Please note that the parent div must be fixed and must be 100% height.
Thank you in advance!
You could kinda hack it cross-browser by expanding the width of the nav element and force scrollbars. Updated JSFiddle.
nav {
position:relative;
height:100%;
width: 110%; /* <---- */
overflow-x:hidden;
overflow-y:scroll; /* <---- */
}
Of course, you'll want to adjust the percentage to your needs or use calc( 100% + 15px ).
You can try the following :
#left-panel {
position:fixed;
height:100%;
top:0px;
left:0px;
border:1px solid red;
width:220px;
overflow:hidden;
}
nav {
height:100%;
overflow-y:auto;
overflow-x:hidden;
width:100%;
padding-right: 15px;
}
Example
You can style the scrollbar using webkit.
element::-webkit-scrollbar {styling here}
In order to hide the scroll bar on your nav element you can use the following:
nav::-webkit-scrollbar {
width:0!important;
}
Hi everyone my tutorial has a tree div for now. Header,container and footer. header is fixed. but if you check it in JSFiddle you see container div has a problem lags behind the header div i can not solv the problem. what can i do in my css code?
This is HTML code:
<div class="globalHeader">
<div class="globalheader-in"></div>
</div>
<div class="global_container">
<div class="container">
1 <br>2 <br>3 <br>4 <br>5 <br>
</div>
</div>
And CSS code:
.global_container {
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
}
.container {
float:left;
width:981px;
height:100px;
background-color:red;
}
.globalHeader {
width:100%;
height:40px;
position:fixed;
background-color:#2a3542;
z-index:99999;
}
.globalheader-in {
width:981px;
height:40px;
margin-left:auto;
margin-right:auto;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
Using a spacer
You can push the content of container down by adding a spacer element as the first child of the container.
.container:before {
content: ' ';
display: block;
height: 40px; /* equal to the height of the header */
}
WORKING DEMO.
Using top padding
You can also use padding-top for the container to achieve that:
.container {
width:981px;
height:100px;
/* other styles... */
padding-top: 40px;
}
WORKING DEMO.
However If you want to keep the height of the container as 100px, you should use box-sizing: border-box to calculate the height of the container including paddings and borders, as follows:
.container {
width:981px;
height:100px;
padding-top: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO
I would do it like this:
http://jsfiddle.net/8eSAU/5/
.global_container{
clear:both;
position: relative;
top: 40px;
}
It was not working, because you simply hid the text beneath the fixed element.
Kolay gelsin :)
Why not add:
position:relative;
top:40px;
To .global_container {
Demo Fiddle
This assumes you wish the header to scroll with the content, in which case all you need to do per the demo is offset the top of the content by the height of the header, so it initially displays below it.
A simple padding-top will take care of that.
JSFiddle
.global_container{
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
padding-top:40px; /* heigt of fixed header */
}
you can add padding-top to the .global_container or body
padding-top should be same as height of header.
Please find the link below for the Fiddle
Add the following to global_container class
position:absolute;
top:47px;
FIND FIDDLE HERE
I've been trying this for a while and I don't seem to find a solution.
HTML:
<table>
<tr>
<td>
<div>this div has to expand over the td padding</div>
</td>
</tr>
</table>
CSS:
table {
height:100%;
}
td {
height:100%;
background: green;
padding:5px;
}
div {
min-width:100%;
height:100%;
background:yellow;
float:left;
white-space:nowrap;
}
I want the div to expand exactly as much as the td but to also expand over the td padding.
Moving the padding to the div element is not a solution since the div has to be 100% height and at least 100% width, the rest of the div's width is overflow:hidden and appears on hover but I try to keep the example as simple as possible so I didn't include that here.
Edit:
#codehorse I've tried your approach but now it appears that the div expands on the whole body so I guess Era is right, relative positioning might not work on td. I could use another wrapper between the td and div but I would like to avoid that if possible. I'm looking for a standard solution on this.
#Era Works perfect Thank you!
Although this is not the right way to do this but if it works for you then use this CSS for div:
div {
margin: -5px;
padding: 5px;
position: relative;
}
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
td {
position: relative;
}
If your table structure is not too complex,i'll suggest you use display:table to achieve your purpose.....this way, you'll avoid position attributes, which otherwise conflict with layout sometimes making a big mess of things.
Also, html table is not suggested these days, since you have css tables!!
here is a demo
HTML
<div class="table">
<div class="td">
<div class="inner">this div has to expand over the td padding</div>
</div>
</div>
CSS
.table {
height:100%;
display:table;
}
.td {
height:100%;
background: green;
padding:5px;
display:table-cell;
}
div.inner {
min-width:100%;
margin:-2px; /* change this to suit your need */
background:yellow;
float:left;
white-space:nowrap;
}