This question already has answers here:
CSS table right margin in scrollable div
(4 answers)
Closed 6 years ago.
I have a div enclosing a table.
Div has a padding of 20px.
If the table size is more than the div then scroll bar should be shown on the div.
Issue:
Padding is working fine when scroll bar is not present.
But when scroll bar is present then the scroll bar totally occupies the right side padding.
But some how the bottom padding is still applied event with scroll bar.
Question:
How to give 20px padding to div and make sure its content do the padding calculation from scroll bar if present else from border of div?
Note: No styles can be specified at table element. Since this table doesn't aware of the div wrapper.
Sample code and output image attached.
<html>
<head>
<style type="text/css">
.parentDiv {
border: 1px solid red;
height: 50px;
width: 200px;
overflow: auto;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td></td>
</tr>
</table>
</div>
<br/>
<div class="parentDiv">
<table class="childDiv" width="100%" height="100%">
<tr>
<td><pre>Sample text <input type="textbox"/></pre><br/>Sample second line</td>
</tr>
</table>
</div>
</body>
</html>
Output:
take the padding out of the parentDiv class, wrap the table in a new div - you'll still get scroll bars in the parentDiv, but your container div should compress the table to accomodate them.
try this:
<div class="parentDiv">
<div class="childDiv">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
overflow:auto;
}
.childDiv {
border: 1px solid blue;
padding: 20px;
width:100%;
height:100%;
}
</style>
You'll notice that as you increase the height of the table, the lower border drops off the bottom of the div - you can scroll down to see it.
You could move the scrolling in to the new div:
<style type="text/css">
.parentDiv {
border: 1px solid red;
width: 200px;
padding: 20px;
}
.childDiv {
border: 1px solid blue;
width:100%;
overflow-y:auto;
height:50px;
}
</style>
Related
I have a table and in one of the columns I have some graphics. What I need is a vertical line 20px from left on top of all what is in the td element.
I tried something like this but the result is not good.
<td>
<div>
<!-- my vertical line -->
<div style="width:20px; height:30px; z-index:1011; border-right: thin solid red;">
</div>
<!-- other content under the vertical line in td -->
<!-- here width can be more than 20px -->
<div style="width:5px; height:10px; z-index:1001; background-color:gray;"> </div>
</div>
</td>
I have also tried with position: relative; for "main div" and absolute for other 2 but not a good result.
With this in place is perfect, I just need to add a vertical line on top of this 20 px from left
<td>
<div>
<div style="width:5px; height:10px; z-index:1011; background-color:gray;"> </div>
</div>
</td>
red line
--------|----------td-----
|
--------|-- some line (one div in may case)
|
--------|---------</td>---
--------|---------<td>----
|
--- | other line
|
------------------</td>---
Fiddle wrong result ("not good")
this is what is expected
There are numerous pitfalls with a table used for creating a chart.
First, the table's cellspacing and the cells vertical padding must be set to zero to make the red line all the way from top to bottom. Second, the height should probably be set to some value, so the inner div of the last cells in a row can be set to 100% height in order to make the red line go from top to bottom within a cell (it also needs to be position absolutely due to possible overlap). Third, to make the horizontal lines appear in the middle of the cells, all cells should have a fixed line-height and the horizontal lines should be displayed as inline-block with vertical-align: middle.
table tr td {
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
line-height: 20px;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
}
.vertical-line{
width:0px;
z-index:10011;
border-right: thin solid red;
position: absolute;
height: 100%;
left: 20px;
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
td, td > div {
height: 100%;
position: relative;
line-height: 30px;
}
<table cellspacing="0">
<tr>
<td>1</td>
<td>11</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-5"></div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-30"></div>
</div>
</td>
</tr>
</table>
Note: I also added and altered some other minor stuff like border-radius to reflect your screenshot a bit. If you want to play around, here is the fiddle.
I just made minor changes to your stylesheets and its working.
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
margin-left: 5px;//addes this
}
.vertical-line{
height:30px;
width:20px;
z-index:10011;
border-right: thin solid red;
position: absolute;//and this
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
Let me know if you are satisfied with this answer. :)
Try this :-
<div style="width:5px; height:10px; z-index:1001; background-color:gray;padding-left: 20px"> </div>
or
<div style="width:5px; height:10px; z-index:1001; background-color:gray;margin-left: 20px"> </div>
Hope this'll help.
I am trying to layout a couple of div's inline and want to give them a fixed width. I currently have:
<style>
.af-header{
border: 1px solid black;
}
.menu-item-header{
border: 1px solid blue;
width: 200px;
}
.menu-item-detail{
border:1px solid orange;
width: 400px;
}
.menu-item{
border: 1px solid red;
}
</style>
<table class='af-header'>
<tr>
<td width=800>
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</td>
</tr>
<tr>
</tr>
</table>
The problem that I'm having is that the menu-item-header and menu-item-detail collapse down to fit the text like in the following screenshot:
How do I fix the width in these two so that the width is respected?
Use display: inline-block not display: inline.
Use display:inline-block for your div elements to put them in line
.af-header div
{
display:inline-block;
}
Js Fiddle Demo
I'm not sure why are you using table here, if it only to take the advantage of column effect then you don't need to use it. You can use just div to achieve the same
<div class="af-header">
<div class='menu-item'>
<div class='menu-item-header'>my header</div>
<div class='menu-item-detail'>here is my detail</div>
</div>
</div>
Js Fiddle without table
I have a webkit scrollbar attached to a div. I have disabled the default scrollbar by setting the overflow property to hidden, in the body element. I can see the scrollbar which is attached to the div, but cannot see its thumb, and hence also not able to scroll. The div to which scrollbar is attached has id="container". Here is the css -
html
{
}
body
{
overflow-y:hidden;
overflow-x:hidden;
}
#container
{
height:100%;
overflow-x:hidden;
overflow-y:scroll;
}
#Title
{
padding-bottom: 10px;
}
table
{
width: 100%;
table-layout: fixed;
}
#container::-webkit-scrollbar
{
background: transparent;
width: 12px;
}
#container::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(10,11,12,0.3);
/* border-radius: 10px; */
}
#container::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:rgba(104,102,102,0.8);
}
The container hosts a div (with id="Title"), and a table. The table has lot of content, so scrolling should happen, but unfortunately it doesn't. If someone could please point out what am I doing wrong, that would be great. Thanks!
Edited : Adding the html -
<body>
<div id="container">
<div id="Title">
<span id="Heading_part_1">abc</span>
<span id="Heading_part_2">xyz</span>
<span id="Heading_part_3">pqr</span>
<span id="Timestamp"></span>
<span id="WrenchIconContainer" onclick="togglemenu();">
<input type="image" src="res/wrench-arrow-icon.png" width="18px" height="18px"/>
</span>
<div id="menu_container" style="display:none">
<p id="id1">sfdf</p><p id="id2" onclick="dosomething();">ffsdf</p>
</div>
</div>
<table id="table1" cellspacing="0" width="auto">
<thead>
<tr>
<th id = "headline" width="85%"></th>
<th id = "storytime" width="15%"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
Because your #container has a height of 100%, the scrollbar "thumb" has no reason to appear because container is actually big enough to fit the entirety of its contents. If you give it a fixed, pixel height, your "thumb" will appear and function beautifully. Here's an example.
If you wrap your container with yet another wrapper and give it position: relative; you can leave your container with a 100% height, but add
position: absolute;
top: 0;
left: 0;
If what you're really trying to do is replace the main browser scroll bar for the page, just replace #container with body for your ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb selectors.
Sorry to have to ask this since there are many CSS 100% height questions here (which I've read).
I'm to achieve a simple layout using DIVs instead of a TABLE. The first 3 rows are fixed height, the 4th row should expand and the fifth row should be a fixed size (at the bottom).
This is strait forward with a table, how can I do this with DIVs?
Here's the TABLE version:
<html>
<head>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr height="20px">
<td>
fixed height 20
</td>
</tr>
<tr height="50px">
<td>
fixed height 50
</td>
</tr>
<tr height="100px">
<td>
fixed height 100
</td>
</tr>
<tr>
<td>
auto expanding height
</td>
</tr>
<tr height="50px">
<td>
fixed height 50
</td>
</tr>
</table>
</body>
</html>
Here's my best attempt so far which doesn't work.
<html>
<head>
</head>
<body>
<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;">
<div style="height: 20px; border-width: 2px; border-style: solid">
fixed height 20
</div>
<div style="height: 50px; border-width: 2px; border-style: solid">
fixed height 50
</div>
<div style="height: 100px; border-width: 2px; border-style: solid">
fixed height 100
</div>
<div style="border-width: 2px; border-style: solid;">
Auto expanding?
</div>
<div style="height: 50px; border-width: 2px; border-style: solid">
fixed height 50
</div>
</div>
</body>
</html>
Divs stack up automatically so all you have to do is hand them a height and you should be all set. Try this:
HTML
<div class="container">
<div class="twenty">
fixed height 20
</div>
<div class="fifty">
fixed height 50
</div>
<div class="hundred">
fixed height 100
</div>
<div class="auto">
<div class="content">
....
</div>
</div>
<div class="fifty" style="border-bottom:none; border-top:1px solid">
fixed height 50
</div>
</div>
CSS
html,body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.container {
width:100%;
height:100%;
}
.twenty, .fifty, .hundred, .auto {
border-bottom:1px solid black;
}
.twenty {
height:20px;
}
.fifty {
height:50px;
}
.hundred {
height:100px;
}
.auto {
height:100%;
overflow:hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin:-120px 0;
padding:120px 0;
}
.content {
float:left;
overflow:auto;
height:100%;
}
.content{
width:100%;
}
EDIT Updated answer for future reference. Now the container completely fills the width and height of the document and just scrolls the scrollable portion of the page while keeping the sections that OP wanted available.
Full view: http://jsfiddle.net/8abeU/show/
Fiddle: http://jsfiddle.net/8abeU
You need to set the parent's position attribute to absolute and set the auto div's height to 100%. You can see it here. Also remember to include a doctype declaration at the top of your HTML, that'll help make it render more consistently across browsers.
Note:
This won't cause the container to fill the entire window vertically but if you don't have to put a border on it, it will look as if it does.
The quick answer is replace your table and tr elements with DIVs. Then set the first three rows with a css class="fixed-height-(whatever size)" Let the forth div expand as needed and the last row have a css class="fixed-height-(whatever size). You can use the same class where the heights are the same, assuming all the other styling is the same.
How can i make the inner table to overlap the parent div with 5 px while resizing?
my current solution:
<div id="crop">
<table style="width:105%; height:105%;">
//table cells
</table>
</div>
problem is that it gets smaller when resizing...
how can I make it constantly overlap with 5px;
The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.
You should see that when rendered, the blue "outer" div is displayed within the "inner" div. The "inner" div will be red for browsers other than IE where it will be green instead.
Also note, in this example I had to subtract 2px from the height of the "inner" div to adjust for the top and bottom borders.
<html>
<head>
<style type="text/css">
#outer {
position: relative;
border: solid 1px blue;
height: 100px;
}
#inner {
position: absolute;
border: solid 1px red;
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
}
</style>
<!--[if IE]>
<style type="text/css">
#inner {
border: solid 1px green;
height: 108px;
width: expression(document.getElementById("outer").clientWidth + 10);
}
</style>
<![endif]-->
</head>
<body>
<table width="100%">
<colgroup>
<col />
<col width="100" />
<col width="200" />
</colgroup>
<tr>
<td>
<div id="outer">
<div id="inner">
<table border="1">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>
</div>
</div>
</td>
<td>Alpha</td>
<td>Beta</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
</body>
</html>
In short:
Stick the table inside another div and set the table's width to 100%
Make that div do the moving around by setting its positioning to absolute (make sure the parent has relative) and set its width to 100%.
Use negative margins on the new div to pull it out by precisely 5px.
It's a bit messy but you'll definitely need negative margins and you'll probably need the position:absolute to have it overlapping...
Have you tried the following:
table {
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
This table will overlap the div with 5px at the right hand side and at the bottom. Margins are added to make the table fill the left hand side and top. Just omit the margins if you want the whole table to offset. You'd probably have to add some style to the div or content above the table, to keep the div from collapsing.
Here's a full example:
<style type="text/css">
#container {
background-color: red; //color added for illustration
}
#data {
background-color: blue; //color added for illustration
position: relative;
top: 5px;
left: 5px;
margin-top: -5px;
margin-left: -5px;
}
</style>
<!-- ... -->
<div id="container">
some text to make the div visible at the top
<table id="data">
<!-- rows -->
</table>
</div>