I have a div that is scrollable horizontal and vertical. The problem is my header expands pretty far horizontal, as it is a table header that has a lot of columns. I want to be able to scroll left and right on the table but scroll vertical and keep that heading at the top always, but be able to scroll left at any time and show the rest of the heading. I've found some javascript examples online but i don't see any on how to do this inside a div, and I've tried to incorporate them but do not work.
Can anyone help me with this?
<div style = "margin:20px 0px 7px 15px">
<strong>  Audit Log:</strong>
<div style="width:750px; height:580px; border-width:1px; border-style:solid; border-color:#000; background: #bbb">
<div style="margin:20px 0px 0px 12px">
<div class="container">
<div class="heading">
<table>
<tr>
<th style="width:160px">Time:</th>
<th style="width:210px">Source:</th>
<th style="width:75px">Category:</th>
<th style="width:90px">Ssa Admin:</th>
<th style="width:85px">UserID:</th>
<th style="width:50px">Action:</th>
</tr>
</table>
</div>
<div wicket:id="repeaterContainer">
<table style="table-layout: fixed; width:505px">
<tr wicket:id="repeatingList" class="spaceUnder">
<td style="width:160px" wicket:id="time"></td>
<td style="width:220px" wicket:id="source"></td>
<td style="width:70px" wicket:id="category"></td>
<td style="width:90px" wicket:id="ssaAdmin"></td>
<td style="width:80px" wicket:id="userID"></td>
<td style="width:250px" wicket:id="action"></td>
</tr>
</table>
</div>
</div>
</div>
div.container
{
position:relative;
overflow:auto;
width:720px;
height:380px;
border-width:1px;
border-style:solid;
border-color:#000;
background: #fff;
}
div.heading
{
position: absolute;
border-bottom: 1px solid #000;
background: #bbb;
width:1250px;
}
</style>
</wicket:head>
<wicket:extend>
<script>
$('.container').scroll(function() {
$('.header').css({
'left': 1250 - $(this).scrollLeft()
});
});
</script>
<p>
<div wicket:id="tabs" class="tabpanel"></div>
</p>
</wicket:extend>
Do I understand correct, that you need just scrolling tbody and whole table is in the div?
Related
I have multiple elements in a cell of an HTML table. I want some of the elements to be aligned to the bottom of the cell and some to be aligned at the top. I am having trouble getting the elements to align to the bottom. My table is:
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
However the elements within the div seem to want to stay centered in the cell, rather than stay at the bottom. I have tried two different methods so far with CSS:
div.value_input {
position: absolute;
bottom: 0;
}
which just takes the div down to the bottom of the page. And:
div.value_input2 {
display: table-cell;
vertical-align: bottom;
}
Which has no effect.
I have the code here in JSFiddle
What do I need to do to get the input box and button to align to the bottom of the cell?
You need to set the parent elements position to relative position:relative in order to use absolute positioning. Here is a working snippet.
table {
border-collapse: collapse;
}
table, th, td {
border: 2px solid black;
position:relative;
}
div.value_input {
position: absolute;
bottom: 0;
}
div.value_input2 {
position:absolute;
bottom:0;
}
<table>
<tr>
<th style="background-color: #007CE2">
Test
</th>
<th style="background-color: #E54040">
Test
</th>
</tr>
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
<tr>
<th style="background-color: #8BC34A">
Test
</th>
<th style="background-color: #FF9800">
Test
</th>
</tr>
<tr>
<td style="background-color: #8BC34A">
<p id="t3_list"></p>
<input type="text" name="t3_input" id="t3_input">
<button>
Add
</button>
</td>
<td style="background-color: #FF9800">
<p id="t4_list"></p>
<input type="text" name="t4_input" id="t4_input">
<button>
Add
</button>
</td>
</tr>
</table>
You need height:somepx for vertical align to work in this.
Make the table cell position: relative, and then you can try position: absolute on the div again...
table tr td {
position: relative;
}
div.value_input2 {
position: absolute;
bottom: 0;
}
fiddle
How do I prevent the div overflow that appears at the top.
I do not want to set static dimensions either.
See it here http://jsfiddle.net/tok5zf35/1/ or below
.panel_white_black {
border:7px solid #56575a;
filter:alpha(opacity=70);
background-color:#56575a;
}
.round_all {
-webkit-border-radius:4px;
-khtml-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.round_top {
-webkit-border-radius:4px 4px 0px 0px;
-khtml-border-radius:4px 4px 0px 0px;
-moz-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
<div class="panel_white_black round_all" Width="200px">
<table width="100%" style="border-collapse:collapse; padding:0;" cellpadding="0">
<tr>
<td>
<div style="background: #353639; padding:7px; float:left; width:100%;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="background: #FFFFFF; padding:7px;">{data here}</div>
</td>
</tr>
</table>
</div>
Use box-sizing attribute:
.round_top {
box-sizing:border-box;
}
Corrected fiddle.
There's a good explanation on how this works here on CSS-tricks.com. Essentially it boils down in this case to that your width:100% now means 100% including my own borders instead of the default just my content, which caused the overflow.
If you are not aware of appending your code with yet another div - here is the solution
http://jsfiddle.net/my0j0mmy/
<div style="background: #353639; padding:7px;" class="round_top">
<div style="float: left;"> <font color="white">{dialog title}</font>
</div>
<div style="float:right;"> <font color="white">{X}</font>
</div>
<div style="clear:both"></div>
</div>
I searched a lot, but now want to ask because I found no answer:
If have two div elements that should be located next to each other with full width (each exactly 50% of the full width). It could be that the first or the second div is hidden (style="display=none"). In this case the other div should be displayed in full width.
My solution is this:
<table style="width: 100%;">
<tr>
<td style="padding: 0px;">
<div id="div1">
...
</div>
</td>
<td style="padding: 0px;">
<div id="div2">
...
</div>
</td>
</tr>
</table>
That works almost perfect, BUT when both divs are displayed the first one seems to be 55% and the second one 45% of the width.
If course I can set the width of the div when hiding the other to 100%, but I want to avoid doing that.
Does anyone have a solution to make them both 50% when both are displayed.
A JQuery approach with no tables
You can achieve this with JQuery (or plain javascript) which I am assuming you are using to show/hide the elements anyway.
$("#ButtonOne").click(function () {
$(".one").toggle();
if($(".one").is(":visible")){
$(".two").css("width", "50%");
}
else{
$(".two").css("width", "100%");
}
});
$("#ButtonTwo").click(function () {
$(".two").toggle();
if($(".two").is(":visible")){
$(".one").css("width", "50%");
}
else{
$(".one").css("width", "100%");
}
});
The above JQuery assumes two buttons for toggling the visibility of the elements.
Here is an example
With the example, it should be noted that using 50% width with inline-block requires zero whitespace in between the elements. Hence the </div><div... requirement.
You will need some vertical-align:top; aswell to ensure the DIV elements stay in line.
Incase the link ever breaks, here is the accompanying HTML...
<div class="main">
<div class="one">this is one</div><div class="two">this is two</div>
</div>
<input type="button" id="ButtonOne" value="Toggle one" />
<input type="button" id="ButtonTwo" value="Toggle two" />
...and CSS...
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
.one {
background-color:red;
height:100px;
width:50%;
display:inline-block;
}
.two {
background-color:blue;
height:100px;
width:50%;
display:inline-block;
}
Can you place both divs in the same table cell?
<table style="width: 100%;">
<tr>
<td>
<div id="div1">
...
</div>
<div id="div2">
...
</div>
</td>
</tr>
</table>
You could simply toggle a class....
table { width: 100%; padding:0; }
td { padding:0; margin:0; }
td > div { width: 50%; display: block; float: left; height: 50px; cursor: pointer; }
#div1 {background: #a00;}
#div2 {background: #00a;}
.wide {width: 100%;}
.hide { display: none;}
and the jquery...
$('div').click(function () {
$(this).toggleClass('wide');
$('div').not(this).toggleClass('hide');
});
DEMO HERE
Would work for multiple divs easily: demo 2
Use table-layout:fixed:
EDIT:
You have to set the display:none on the td, not on the div.
<table style="width: 100%; table-layout:fixed">
<tbody>
<tr>
<td style="padding: 0px; width:50%">
<div id="div1" style="border: 1px solid black">
This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text
</div>
</td>
<td style="padding: 0px; width:50%; display: none;">
<div id="div2" style="border: 1px solid black">
This isn't as long as the other text.
</div>
</td>
</tr>
</tbody>
</table>
I've tested it on Chrome, Firefox and IE10
ok guys,
thanks for your help. now i found what i was searching for:
<table style="width: 100%;">
<tr>
<td id="td1" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
<td id="td2" style="padding: 0px; min-width:50%;">
<div>
...
</div>
</td>
</tr>
</table>
both td tags are next to each other and both take exactly 50%. when hiding td1 or td2, the other td goes into full width automatically.
best regards...
You can achieve this by setting width in the td itself, and when you want to hide any one div just add "display:none;" in the specified td instead of the div, then the remaining div will have 100% width.
<table style="width: 100%;">
<tr>
<td style="padding: 0px; width:50%;">
<div id="div1" >
hii
</div>
</td>
<td style="padding: 0px;width:50%;">
<div id="div2" style="">
byyee
</div>
</td>
</tr>
</table>
I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
Here's example-
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Add z-index:-1 and position:relative to .content
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
z-index: -1;
position:relative;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<div class="container">
<div class="branch_1">
<div class="branch_1__child"></div>
</div>
<div class="branch_2">
<div class="branch_2__child"></div>
</div>
</div>
If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
Incep[inception]tion
Here's a fiddle to play around:
https://jsfiddle.net/orkLx6o8/
So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.
I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.
Is there any way to do this?
Here is a quick rough sketch with MS Paint, I hope this explains what I need:
In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!
.
And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.
<table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
<tr>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr><tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td><td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr></table>
Any help is really appreciated.
See fiddle for code and demo
fiddle: http://jsfiddle.net/kDKEw/2/
demo: http://jsfiddle.net/kDKEw/2/embedded/result/
HTML:
<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
<tbody><tr>
<td valign="middle" colspan="2" class="row4 uname">
<div class="name">
Guest
</div>
</td>
</tr><tr style="height: 36px;">
<td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
<div class="postcolor">
Post content
</div>
</td><td valign="top" class="lefty" style="float: right; width: 6%;">
<div class="postdetails">
Details
</div>
</td>
</tr>
</tbody>
</table>
SS:
Updated Fiddle as per image illustration ( http://i.imgur.com/o56CD.png ): given by deathlock
Fiddle: http://jsfiddle.net/7xfxF/1/
Demo: http://jsfiddle.net/7xfxF/1/embedded/result/
SS:
In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:
EDIT
I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.
If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.
<style type="text/css">
table.postable {
border-collapse: separate !important;
border-spacing: 1px;
}
table.postable td {
border:1px solid black;
padding: 5px;
}
td.ritey {
border: 0px !important;
padding: 10px 5px 10px 5px !important;
}
td.lefty {
padding: 10px 5px 10px 5px !important;
}
div.postcolor {
margin: 3px;
padding: 10px;
border: 1px solid black;
}
</style>
<table width='100%' class='postable'>
<tr>
<td colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr>
<tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td>
<td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr>
</table>
OUTPUT:
See this jsFiddle for a demonstration.