I have a table where the first column's TDs have a position: sticky
And I need to have several child elements, taking up the full height of the cell.
TD:nth-child(1) {
position: sticky;
left: 0px;
}
SPAN {
display: inline-block;
width: 5px;
background-color: red;
margin-right: 1em;
}
<TABLE>
<TR>
<TD>
<SPAN></SPAN><SPAN></SPAN><LABEL>Other contents</LABEL>
</TD>
<TD>Multiline<BR>contents
</TD>
</TR>
</TABLE>
Normally I would set position: relative to TD and absolute for SPANs, but I need TD to be sticky.
I'm I missing something?
Using DIVs with display: table-* is not an option, because I need a colspan.
i don't know, if i understood you correctly, but position of absolute is also working for parents with position sticky. That means, the child will also orientate on the parent althought it has sticky.
All position properties ( sticky, relative and absolute) except for static will make the child orientate to them.
Hop i could help, and not missunderstood you.
Related
I am trying to make a table with a "sticky" table header. I set the position to absolute and it works, but now the header overflows horizontally past the table borders and even covers the scrollbar. How can I make an element absolute but still visually contained by its parent element?
It's hard to accurately display my code because I'm trying to modify Kibana and there are many different files involved but here is my best attempt at a simplified example:
HTML:
<div>
<table>
<thead>
<tr class="headerRow">
<th>...</th>
...
</tr>
<tr class="headerRowInvisible">
<th>...</th>
...
</tr>
</thead>
<tbody>...</tbody>
</table>
</div>
CSS:
div {
z-index: auto;
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
min-height: 26px;
position: relative;
}
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
border-spacing: 0;
}
.headerRow {
white-space: nowrap;
position: absolute;
background-color: white;
z-index: 50;
}
.headerRowInvisible {
white-space: nowrap;
visibility: hidden;
}
If you're wondering about the invisible <tr>, setting the position to absolute messed with the formatting of the rest of the table and overlapped with the top of it, so I created an invisible <tr> with normal positioning so that it would create space and provide correct column widths to the table body. The background and z-index is so that the sticky header will properly cover the body when you scroll down. Otherwise you get text on top of text and it looks jumbled.
Use top, right and left properties to adjust the placement of that absolutely positioned element, and use margin-top on the next non-absolutely positioned element below it to create some space in order to avoid overlapping.
The following table method properly centers the div and the size of the div matches that of the content:
<table>
<tbody>
<tr>
<td width='50%'></td>
<td>
<div>
<input type='text' name='linksearch' size='40'/>
<a href=''>Search</a>
</div>
</td>
<td width='50%'></td>
</tr>
</tbody>
</table>
What is the equivalent CSS using just div elements? I see a lot of answers like:
div.center {
margin-left: auto;
margin-right: auto;
}
but when using this method it is not clear to me how to make the width of the div grow or shrink to match the content of the div. I can specify an explicit width but even then, the content can overflow to the right and thus it is not really centered (you can see this clearly by setting the background-color of the div).
So is the table method is still superior or is there a way to do this using only CSS?
UPDATE:
As requested, here is an example that illustrates the problem:
http://jsfiddle.net/qn0txere/3/
The first "table method" works as expected. The second 'margin: 0 auto' method does not really work in that the div does not shrinkwrap around the content. The content overflows to the right.
I see what you mean, but there are ways around that, and using CSS for the style is far more beneficial in the long run as it's much easier to change later on etc,
To fix the problem of the content going outside of the div you can use the auto property for the width and height,
Like this:
div.center {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
You may also wish to add min-width and min-height properties if needed to make it look more appealing if there isn't a great amount of content within the div (or max properties) :
min-width: 300px;
min-height: 500px;
max-width: 500px;
max-height: 600px;
You may also wish to add a ID or class to the specific div, so in this case you can more clearly write the CSS for just that specific div
You have to add a containing div (preferred) or add properties to the body. Since your markup was wrong anyways, I'll go for the preferred method by adding the FORM element:
<div class="center">
<form>
<input size="40" name="linksearch" type="text"/>
Search
</form>
</div>
Now, since I have my required elements, I can center things and make them work as I want because I have the chance to add positioning for all elements ( + proper markup):
.center {
text-align:center
}
form {
white-space: nowrap;
padding: 10px;
margin:0 auto;
width: auto;
background-color: #cc0;
display:inline-block
}
Really easy, huh? You can see an update to your fiddle so you can preview and play around
I have run into a problem with position:relative on th elements in FireFox.
In Chrome and IE the th element is a valid offset parent for absolute positioned elements.
<div class="relative">
<p>fill some spacing</p>
<table>
<tr>
<th>
Hello?
<div id="absolute">Is it me you're looking for</div>
</th>
</tr>
</table>
</div>
.relative {
position:relative;
border:1px solid green;
}
th {
position:relative;
border:1px solid red;
}
#absolute {
position:absolute;
top: 0;
left: 100px;
width: 200px;
border: 1px solid blue;
}
http://jsfiddle.net/ntQqL/2/
In FireFox the #absolute element is positioned at the very top of the .relative, in Chrome and IE it is positioned at the top of the th, like I expected.
Is this a well-known difference, or am I doing something wrong?
It probably has to do with the way the display and position properties are handled...
If you put a display:block on your th, it will work.
Christiaan answer also works.
But I guess the best way to fix this issue would be to put a relative positionned div inside your th.
It does seem to work when you put position:relative on the table instead of the th. Maybe that could be used as a workaround in your situation?
i am trying to absolute position a ASP.NET Datalist which inside a table with TR & TD elements - i have the TR displaying horizontally - applying the absolute positioning just shows the last TD element. Using relative/static shows the entire TD elements which is how it should be - i need to have it absolutely positioned in one position - finding it hard to get it right - any suggestions?
.AspNet-DataList table
{
width: 200px;
}
.AspNet-DataList tr, .AspNet-DataList td
{
float: left;
left: 250px;
padding-right: 2px;
position: absolute;
top: 304px;
}
.AspNet-DataList td a
{
text-indent: -9999em;
display:block;
height: 25px;
width: 25px;
}
It is a step by step form which has a cirlce orange background with number 1 to 6 which is being displayed horizontally - thought id mention it just in case your thinking what im trying to achieve. I hate to use position:absolute but sometimes it just something you require at the time and cant do without it.
Here is the form and the divs;
<div class="radarform">
<div class="look-for">Look For</div>
<div class="agree">Agree</div>
<div class="strongly-agree">Strongly Agree</div>
<div class="disagree">Disagree</div>
<div class="strongly-disagree">Strongly Disagree</div>
<energy:FormBuilder ID="HealthAndSafetyRadarForm" runat="server" XmlPath="~/asset/forms/securusradarform.xml" CssClass="hsRadarform" ButtonText="Send Form" ShowTitle="true" ShowSideBar="true" />
<div class="clear-me"></div>
</div>
In Firefox FireBug it shows this and has its own class that i am using;
<div id="ctl07_HealthAndSafetyRadarForm_Wizard_SideBarContainer_SideBarList" class="AspNet-DataList">
UPDATE: I managed to sort the problem out - i was positioning the td so they were ending up beind each other - i did this on the table and then positioned the hsRadarForm relatively - that has sorted it out - gosh i hate position:absolute.
.AspNet-DataList table
{
left: 45px;
position: absolute;
top: -46px;
width: 175px;
}
.AspNet-DataList tr, .AspNet-DataList td
{
float: left;
padding-right: 2px;
}
Can you wrap the data list in a DIV and absolutely position that? It's sometimes easier to put things in a container and absolutely position those.
I'm struggling to understand what you're trying to achieve - something about a circular orange background? - but if you really do need to reposition td elements, you will almost certainly need to set the td, tr, tbody, and table to display: block;
I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.
#banner {
width: 700px;
height: 90px;
top: 60px;
left: 178px;
overflow: hidden;
text-align: center;
display: table-cell;
vertical-align: bottom;
position: relative;
}
<div id="banner">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>
But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?
My current solution is:
<div id="banner">
<table width="100%" height="100%"><tr><td valign="bottom" align="center">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</td></tr></table>
</div>
But I do not like this solution.
Short answer:
Change
top: 60px;
to
bottom: 60px;
Long answer:
The declaration position: absolute takes your element out from wherever it is and place it relative to innermost element that is not declared static. In no longer participate in the alignment of any other element, hence it no longer serve as table-cell (the declaration has no effect). Additionally, declaration such as top: 10px means to place it that much distance from the top of that containing element.
Declaring an element as position: relative makes declaration such as top: 10px means 'move the element 10px from the top from the current position'. It is possible for elements declared relative to overlap with other elements, although you should remember that the original position still determines the arrangement of other elements.
I hope this answer your question.
You could also try setting a position:relative; container, which makes the banner (the #banner position:relative; and the img position:absolute) then set the absolute position to be bottom:0, aligning it to the bottom of the container. If it's the whole page, just set the width and height of the container to 100%, and remove extra padding/margin on the body or on the div.