hi all i wanted to put the z-index to ensure that the "Event today" will be behind the element(collapse).
Here is my code below....
<div id="infobox" class="collapse" >
<table id="attacks" class="display" cellspacing="0" width="100%" >
<thead style="z-index:10">
<tr>
<th>Time</th>
<th>Attacker</th>
<th>Target</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Time</th>
<th>Attacker</th>
<th>Target</th>
</tr>
</tfoot>
</table>
</div>
<div class="toolbar-left2 noselect" >
<table>
<tr>
<td style="color:white;background-color:#000000;">Events Today: <font></font></td>
<td id="totalattack" style="color:white;background-color:#000000;">0 </td>
<td align="right"id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
</tr>
</table>
</div>
My question is how to ensure that the clock element is behind the element which contains the class collapse...Please help me thank you.
Your z-index: -10 does indeed make your element appear behind other elements.
Only content that is 'positioned', such as with position: absolute, position: fixed or position: relative will respect z-index. Note that the default position: static does not obey z-index.
Also, keep in mind that the default z-index is 0. Although your element will appear to be on top of elements such as <body> and <html>, it will actually be behind them.
Here's a working example, showcasing that your element gets hidden behind a red square:
#sample {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
<div class="toolbar-left2 noselect" style="z-index:-10">
<table>
<tr>
<td style="color:white;background-color:#000000;">Events Today:
<font></font>
</td>
<td id="totalattack" style="color:white;background-color:#000000;">0 </td>
<td align="right" id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
</tr>
</table>
</div>
<div id="sample"></div>
In your example, you'll need to add a position to both .collapse and .noselect, and make sure to give .collapse a higher z-index than .noselect. In the following example, I've also changed the text to red to help illustrate this:
.collapse {
position: relative;
z-index: 10;
color: red;
}
.noselect {
position: absolute;
top: 0;
left: 0;
}
<div id="infobox" class="collapse">
<table id="attacks" class="display" cellspacing="0" width="100%">
<thead style="z-index:10">
<tr>
<th>Time</th>
<th>Attacker</th>
<th>Target</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Time</th>
<th>Attacker</th>
<th>Target</th>
</tr>
</tfoot>
</table>
</div>
<div class="toolbar-left2 noselect">
<table>
<tr>
<td style="color:white;background-color:#000000;">Events Today:
<font></font>
</td>
<td id="totalattack" style="color:white;background-color:#000000;">0 </td>
<td align="right" id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
</tr>
</table>
</div>
Hope this helps! :)
An element with a larger z-index generally covers an element with a lower one.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
By default, the z-index of html and body is 0. When only setting z-index of an element to a negative number, it's going to be behind even html and body.
If you have a background set on html and/or body that would cover your element with a negative z-index, then you can remove the background(s) to verify that the element is, in fact, behind html and body.
Note: The z-index property has no effect on statically positioned elements.
Related
I want to add a button next to each row of my table. Plot twist, the table is inside a div with a fixed width and overflow-x for responsiveness. I want the button to show next to each row outside the container div.
With my current code, the button does show up next to the row but stays in the fixed div.
<div style="width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td>
<div style="position:relative; width:0px;">
<button style="position:absolute;left:10px;">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The solution is using position sticky on the last column.
position: sticky; right: 0px
Reference : W3 Schools.
Here's the snippet:
<div style="width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td style="position: sticky; right: 0px">
<button>Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
I have this code
<html>
<head>
</head>
<body>
<table border="1">
<thead>
<tr>
<th style="height:100px;background-color:red">
<div>numbers</div>
</th>
<th style="background-color:orange">
<div style="display:inline-block;background-color:green;">animals</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.0</td>
<td>cat</td>
</tr>
<tr>
<td>7.0</td>
<td>dog</td>
</tr>
</tbody>
</table>
</html>
Also see this plunkr: https://plnkr.co/edit/0TKcvlauVMAxp69qFovy?p=preview
I want to get the div in the second cell to be the same height as the th element (so all green). I did some research and it seems like height:100% only works if the parent th element has an explicitly defined height. Is there a way to get what I want by only changing the css of the div in the second cell? (I can't change the style of the parent th element, and don't want to use javascript/jquery)
Unfortunately, there are no css solutions in your case.
Only absolute positioned child elements can inherit height from parent without setting height on parent.
You should use script or change your template to solve it.
upd:
How about this solution for you? (you can set 100% height on div:before)
<table border="1">
<thead>
<tr>
<th>
<div>numbers<br> test <br>test</div>
</th>
<th>
<div id="test">animals</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.0</td>
<td>cat</td>
</tr>
<tr>
<td>7.0</td>
<td>dog</td>
</tr>
</tbody>
</table>
<style>
#test:before{
position: absolute;
height: 100%;
width:100%;
top:0;
left:0;
background: #f00;
content: '';
z-index: -1;
}
th{
position: relative;
}
</style>
if it is only about plain bg color, then a pseudo element can do the job
th {/* prepare th to hold a hudge pseudo element*/
overflow: hidden;
}
.fullbg {/* make pseudo's continer the positioning reference */
position: relative;
z-index: 1;/* set over the th , useful for the pseudo coming */
}
.fullbg:before {
content: '';
position: absolute;
height: 200px;/* make it big enough 1000px won't hurt here */
width: 200px;
background: inherit;/* inherit bg color you want */
z-index: -1;/* set under content */
top: -100px;/* slide aside top and left to fully cover th */
left: -50px;
}
<table border="1">
<thead>
<tr>
<th style="height:100px;background-color:red">
<div>numbers</div>
</th>
<th style="background-color:orange">
<div style="display:inline-block;background-color:green;" class="fullbg">animals</div>
</th>
<th style="background-color:orange">
<div style="display:inline-block;background-color:turquoise;" class="fullbg">family</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.0</td>
<td>cat</td>
<td>cat</td>
</tr>
<tr>
<td>7.0</td>
<td>dog</td>
<td>dog</td>
</tr>
</tbody>
</table>
I have two tables floated side by side in a parent div. The leftmost table has a margin-right of 10%. As you can see in the image, the margin is calculated correctly (in this case, the parent is 850px, and the metrics inspector shows an 85px margin) but when drawn, is incorrect (much smaller.)
Resizing the window to make it redraw immediately fixes it. What is going on here!?
HTML:
<table id="subscriptions" class="data">
<tr>
<th colspan="2">Subscriptions
<span id="remaining">Remaining</span></th>
<th></th>
</tr>
<tr>
<td>Spin Classes</td>
<td class="right">3</td>
<td class="right">Redeem</td>
</tr>
<tr>
<td>Spin Classes</td>
<td class="right">3</td>
<td class="right">Redeem</td>
</tr>
</table>
<table id="redeemed" class="data">
<tr>
<th>Redeemed Items</th>
<th class="right">Redeemed</th>
</tr>
<tr>
<td>Spin Class</td>
<td class="right">3/3/13</td>
</tr>
<tr>
<td>Spin Class</td>
<td class="right">3/3/13</td>
</tr>
</table>
CSS:
#subscriptions, #redeemed {
width: 45%;
float: left;
clear: both;
margin: 25px 10% 0 0;
}
#redeemed {
clear: none;
margin-right: 0;
}
I think if you get rid of both the clear lines in the css it might fix it?
I have table and i would like to place simple colored ribbon on top of <td> tag
Example of the table
How then to add ribbon at the top cornert of <td> tag
It sounds good idea helps to identify exact members than the other
so any help how i can add such kind of ribbon on top of <td>
HTML
<table border="1">
<tr>
<td>Name1</td>
<td>Email1</td>
</tr>
<tr>
<td>Name2</td>
<td>Email2</td>
</tr>
</table>
How then we add ribbon on Name1 <td> tag
~ Thanks
You can specify a CSS CLASS for the cells that need a ribbon, then define a background image for that class:
<style>
.ribbon {
/* remember that image url is relative to where the stylesheet or style tag is located at */
/* if this style were defined at /Style/site.css, then you would need a url indicating a previous directory like: ../Images/ribbon.png */
background-image: url('/Images/ribbon.png');
}
</style>
<table>
<tr>
<td class="ribbon">Cell 1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class="ribbon">Cell 2</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td class="ribbon">Cell 3</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Use the :first-child selector, and a background image.
The HTML:
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
</table>
The CSS, using :first-child selector:
table { width:100%; }
td:first-child {
padding:10px;
width:50%;
background-image:url("http://placehold.it/10x10");
background-repeat:no-repeat;
}
The fiddle.
Live demo here (click).
td:first-child:before {
content: '';
width: 30px;
height: 5px;
background: red;
display: block;
position: relative;
left: -10px;
top: -5px;
transform:rotate(-9deg);
-ms-transform:rotate(-9deg);
-webkit-transform:rotate(-9deg);
}
My CSS is based around using a pseudo element to create the ribbon, but you could also give the pseudo element a background image with the appropriate height/width.
I got a table with a couple <td>:
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;">
<div>
Third
</div>
</td>
</tr>
</table>
What I want to do is to place the "Third" <td> (with the div) to the right side of the table and the "First" and "Second" <td> should stay left.
Style with float:right; didn't work for me...
You need to make your table's width 100%, then control the widths of your first 2 columns, and finally right-align your third column.
http://jsfiddle.net/25Mqa/1/
<table>
<tr>
<td class="first">First</td>
<td class="second">Second</td>
<td class="third">Third</td>
</tr>
</table>
CSS:
table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }
The problem is that the width of a <table> is determined by its content, by default. If you want the <table> to span 100% width (of its containing block) like block-level elements do, you can either add table-layout: fixed; and then specify your width - or just give it a width, depending on what you're after, e.g.
table {
width: 100%;
}
http://jsfiddle.net/QEaAd/2/
try add style="text-align:right;"
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; text-align:right;">
<div>
Third
</div>
</td>
</tr>
</table>
Only if you have 2 divs one near other:
<div id="fr">div1</div>
<div id="fr">div2</div>
you can float them right:
<style>
#fr{float:right;}
</style>
<table style="width: 100%;">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; display: block; float: right;">
<div>
Third
</div>
</td>
</tr>
</table>
http://jsfiddle.net/pbesD/
I believe this does what you want, however from what I understand, floating table elements will cause problems in versions of Internet Explorer <8
I dont know what you are trying to do with tables and divs? But I normally use this for emailers.
I use the align attribute for td's. This helps a lot in making sure your layout looks the way you want. And it works in all browsers :)
FIDDLE
HTML:
<table width="100%">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;" align="right">
<div>
Third
</div>
</td>
</tr>
</table>
In Bootstrap 5.2 you can add .text-start and .text-end to your text class to align elements inside a table.