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>
Related
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.
I have a table with a table header to keep up with scrolling. When someone clicks on of the content rows it opens a few extra rows. The problem is that the header table doesn't change size to keep up with the content changes. The main goal would be to keep the header always on top and to match the size of the content when a row is clicked.
<div ng-app ng-controller="ctrl">
<table>
<tr style="background:red;">
<td>one</td>
<td>open</td>
</tr>
</table>
<div style="height: 66px; overflow-y: scroll;">
<table>
<tbody ng-repeat="item in items" ng-click="showSubs = !showSubs">
<tr>
<td>{{item.text}}</td>
<td>{{item.text2}}</td>
</tr>
<tr ng-repeat="sub in subItems" ng-show="showSubs">
<td colspan="2">
{{sub.text}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
jsfiddle
What i'm trying to achieve here is to lock the HEADER and FIRST COLUMN so I can see what day it is and which name i'm under at all times while scrolling up/down or left/right.
I have tried some jquery plugins that make this happen but when the table cells are excessive, it tends to timeout on IE...so i would rather do this with PURE CSS..
Anyone have some valid input on this?
JSFIDDLE:
http://jsfiddle.net/dd5ysjus/15/
i would paste code here but its too much...
here is my css:
div.horizscroll {
overflow: scroll;
width: 600px;
height: 150px;
}
.header {
background: #D7DF01;
}
its hard to find things in it but anyway
add class fix which you want to fixed
.fix{ position:fixed; background:#fff;}
and
div.horizscroll {
overflow-x: scroll;
position:relative;
width: 600px;
}
hope it will help
Try this
<html>
<style>
table{border-collapse:collapse;}
table th{width:100px;}
.container{overflow:scroll;border:solid 1px red;width:700px;height:300px;}
.inner-table{position:relative;float:left;}
.inner-table tr td{padding:53px;background:#ccc;}
</style>
<body>
<table border=1>
<th></th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<tr>
<td class="first-td">First Column</td>
<td colspan="6" rowspan="4" style="padding:0;width:200px">
<div class="container">
<table border=1 class="inner-table">
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="first-td">First Column</td>
</tr>
<tr>
<td class="first-td">First Column</td>
</tr>
<tr>
<td style="height:16px;"></td>
</tr>
</table>
</body>
</html>
It Works!
But you must set the row height inside the container row according to your data needs.
You can also achieve this by changing html structure, please check your updated fiddle - http://jsfiddle.net/dd5ysjus/12/
<table class="table-intro">
..//here goes titles
</table>
<div class="horizscroll">
...//here all data you have
</div>
The content of a row is higher than the row itself. Is there a way to truncate?
I tried this:
<table>
<tbody>
<tr style="height:100px;overflow:hidden">
<td>
<div style="height:400px; width:100px; background: yellow;"></div>
</td>
</tr>
</tbody>
</table>
but it did not work.
Set the table row to display: block
<table>
<tbody>
<tr style="height:100px;overflow:hidden;display:block">
<td>
<div style="height:400px; width:100px; background: yellow;"></div>
</td>
</tr>
</tbody>
</table>
EDIT
If you want the table row to still act like a table row (display: block changes the row rendering) you should use nested DIV elements inside of the table cell instead:
<table style="border: solid blue 3px">
<tbody>
<tr>
<td>
<div style="height:100px;overflow:hidden;border: solid black 3px;">
<div style="height:400px; width:100px; background: yellow;"></div>
</div>
</td>
</tr>
</tbody>
</table>
Code with preview here: http://jsfiddle.net/pYzRu/
Can someone tell me how to create a scrollbar for the inner table? The inner table is not displayed within the container. I colored the background of the container yellow. The table itself is blue.
I wanna see a scroll bar within the table.
Source:
http://nopaste.info/e51385254e.html
and here:
<html>
<body>
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<body>
</html>
wrap your inner table with a div. Make that div scrollable by giving it the width and height styles with overflow as auto or scroll.
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
that should work
Try this on div part
<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">
If fail, try overflow:scroll on the style of the table.
Wrap your table with a div, which will have the same width with your container and overflow:scroll
Example: http://jsbin.com/uheha4