I have a css table, the first 2 columns are already sticky and everything works fine, but I want the table head to be sticky as well.I just cant make it work.
I have already tried using a class for every with: position: sticky, top: 0.
this code makes the first 2 columns sticky
table {
table-layout: fixed;
width: 100%;
}
.fixed{
position: sticky;
left: 0;
}
.fixed2 {
position: sticky;
left: 120px;
}
what I want is the thead to be sticky as well.
Any help would be greatly appreciated. Thanks!
css
thead th { position: sticky; top: 0; }
html
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
Give table-fixed class to table tag and try this:
.table-fixed{
width: 100%;
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead,tbody,tr,td,th{
display:block;
}
tbody{
td{
float:left;
}
}
thead {
tr{
th{
float:left;
}
}
}
}
Related
There is a wide table with table-layout: fixed. I'm trying to figure out how the width: min-content property should work for a cell of this table.
table {
table-layout: fixed;
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.min {
width: min-content;
}
<table>
<thead>
<tr>
<th class="min">Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</tbody>
</table>
I get the desired result in Firefox, but not in Chrome. Is this a Chrome bug or am I doing something wrong?
If it's a Chrome bug, what's the workaround for getting the minimum width of the first column, given that I want to use table-layout: fixed and don't want to look for a fixed cell width like width: 30px?
I have some data that shown in data table. I want to freeze two columns in data table (PPD Delivery Schedule and Check Opex).
The first column is working perfectly, but the second column is not freezing.
I don't have any idea, how to make it happen. Can you guys help me how to figure it out?
Here is my code
<style>
:root {
--screen-width: 1440px;
}
.rich-tabpanel-content-position {
table-layout: fixed;
}
table.dataTable {
display: block;
overflow: scroll;
}
.pbBody {
max-width: var(--screen-width);
overflow-x: auto;
}
.pbBody td.rich-tab-inactive,
.pbBody td.rich-tab-active {
background-color: #7998d2;
color: #FFFFFF;
font-weigth: bold;
background-image: none;
cursor: pointer;
}
.pbBody td.rich-tab-active {
background-color: #637fb2;
}
.dataTables_length {
margin-right: 10px;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
padding-left: 10px;
padding-right: 10px;
}
.loadingMessage {
margin-bottom: 10px;
display: block;
}
#PlantOptions {
width: 50px;
}
thead th {
position: -webkit-sticky;
/* for Safari */
position: sticky;
top: 0;
}
thead th:first-child {
left: 1;
z-index: 1;
}
tbody th:first-child {
left: 0;
z-index: 1;
}
#columnA {
position: -webkit-sticky;
/* for Safari */
position: sticky;
left: 0;
background: #FFF;
border-right: 1px solid #CCC;
}
th.SecondColumn {
position: -webkit-sticky;
/* for Safari */
position: sticky;
left: 100px;
/* This is the width of first column, so second will stick to the right edge of the first column */
z-index: 999;
}
</style>
<table id="salesPlanTable" class="stripe row-border order-column" style="width:100%">
<thead>
<tr>
<th id="columnA">PPD Delivery Schedule</th>
<th id="columnA">Check Opex</th>
<th id="columnA">Sales Price</th>
<th id="columnA">Simulation Sales Price</th>
<th id="columnA">Variance Amount</th>/tr>
</thead>
<tbody>
<apex:repeat value="{!dataSalesPlan}" var="i">
<tr>
<th id="columnA">
<apex:input type="date" value="{!i.deliverySchedulePPD}">
<apex:actionSupport event="onblur" action="{!updateDeliverySchedule}" reRender="">
<apex:param name="salesPlanIndex" value="{!i.index}" assignTo="{!salesPlanIndex}" />
</apex:actionSupport>
</apex:input>
<apex:outputText styleClass="hidden" value="{0, date, MMMM d',' yyyy}">
<apex:param value="{!i.deliverySchedulePPD}" />
</apex:outputText>
</th>
<th class="SecondColumn">
<apex:inputCheckbox styleClass="checkOpex{!i.spd.ID} checkOpex {!i.spd.ID}" value="{!i.opex}">
<apex:actionSupport event="onchange" action="{!updateOpex}" reRender="">
<apex:param name="salesPlanIndex" value="{!i.index}" assignTo="{!salesPlanIndex}" />
</apex:actionSupport>
</apex:inputCheckbox>
<apex:outputText styleClass="hidden checkOpexOutput{!i.spd.ID}" value="{0}">
<apex:param value="{!i.opex}" />
</apex:outputText>
</th>
<td>
<apex:outputText styleClass="latestSalesPrice{!i.spd.ID}" value="{0, number}">
<apex:param value="{!i.latestSalesPriceDocument}" />
</apex:outputText>
</td>
<td>
<apex:input styleClass="simulationSalesPrice{!i.spd.ID}" onkeyup="changeSimulationSalesPrice(event, '{!i.spd.ID}')" value="{!i.simulationSalesPrice}">
<apex:actionSupport event="onblur" action="{!updateSimulationSalesPrice}" reRender="">
<apex:param name="salesPlanIndex" value="{!i.index}" assignTo="{!salesPlanIndex}" />
</apex:actionSupport>
</apex:input>
<apex:outputText styleClass="hidden simulationSalesPriceOutput{!i.spd.ID}" value="{0, number}">
<apex:param value="{!i.simulationSalesPrice}" />
</apex:outputText>
</td>
<td>
<apex:outputText styleClass="varianceAmount{!i.spd.ID}" value="{0, number}">
<apex:param value="{!i.VarianceAmount}" />
</apex:outputText>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
Yes we can make second one also. Us id interested of class in td how you did for 1st one. I will work.
I have created table headers and I want the color of the text to change to white when I hover over the different headers. I have tried color:white, but it doesn't seem to work. I have tried to look on the internet but I can't seem to find an answer. I would like to fix this with CSS because I am still learning Javascript and jQuery.
HTML:
</div>
<nav>
<table>
<tr>
<th class="thclass">Home</th>
<th class="thclass">About</th>
<th class="thclass">Shop</th>
<th class="thclass">Blog</th>
<th class="thclass">Gallery</th>
<th class="thclass">Pages</th>
<th class="thclass">Contact</th>
</tr>
</table>
</nav>
CSS:
body {
margin: 0px;
}
#header {
display: inline-block;
float: left;
margin-left: 70px;
font-family: Castellar;
font-size: 40px;
}
table {
display: inline-block;
/*margin-top: 10px;*/
position: relative;
margin-left: 200px;
border-collapse: separate;
/*border-spacing: 20px;*/
}
table a {
text-decoration: none;
font-size: 17px;
color: #90bde8;
padding-right: 7px;
font-family: Century Gothic;
}
.thclass {
height: 100px;
width: 120px;
background-color: white;
}
.thclass:hover {
background-color: #befcf1;
color: white;
}
You could add CSS hover to all links in your class like so.
.thclass a:hover{
color:red;
}
<table>
<tr>
<th class="thclass">Home</th>
<th class="noHover">About</th>
<th class="thclass">Shop</th>
<th class="thclass">Blog</th>
<th class="thclass"> Gallery</th>
<th class="thclass">Pages</th>
<th class="thclass">Contact</th></tr>
</table>
This way only the links within your class .thClass will change colour.
Here is a fiddle showing this working. https://jsfiddle.net/h3k42Lzq/1/
I hope this helps you.
Thanks
Mo Star is correct in that a tags do not inherit the .thclass:hover class. I would change to this however, since you probably want the text to change while hovering over the entire hr tag instead of just the a tag.
.thclass:hover a {
color:white;
}
Why does applying a webkit filter changes the layers order?
See this minimal example:
setInterval(function(){
t.classList.toggle('grayed');
}, 1000)
.floater {
position: fixed;
top: 5vh;
left: 5vw;
width: 90vw;
height: 90vh;
z-index: 99;
background: yellow;
display: none;
}
td:hover .floater{
display: initial;
}
.grayed td{
-webkit-filter: grayscale(0.5);
}
td{
padding: 1em;
text-align: center;
background: blue;
}
<table id="t">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5<br>
(Mouse over this)
<div class="floater">HELLO</div>
</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
The order changes because when the effect is rendered it gets moved to a different stacking contexts (or "layer"). The solution I found was to place whatever should show in front after the element with this effect.
Hover over the buttons on the left and right corners.
http://aminhafamilia.com.br/layout-options/4.html
http://aminhafamilia.com.br/layout-options/4a.html
Page 4.html displays correctly and page 4a.html does not. the only difference is that the text that I want to show on top is actually after the header (which has the filter). Note that no z-index can fix it because they are not in the same stacking context. Moving it down changes the stacking context.
Child's z-index is set to the same stacking index as its parent, hence why it's not working.
If you are willing to take the floater out of it's table parent, you could try the below JS approach with mouseover & mouseout (to close).
setInterval(function() {
t.classList.toggle('grayed');
document.querySelector('.floater').classList.toggle('grayed');
}, 1000)
document.querySelector('.toHover').addEventListener('mouseover', function() {
document.querySelector('.floater').classList.add('open');
})
document.querySelector('.floater').addEventListener('mouseout', function() {
document.querySelector('.floater').classList.remove('open');
})
.floater {
position: fixed;
top: 5vh;
left: 5vw;
width: 90vw;
height: 90vh;
z-index: 1;
background: yellow;
display: none;
}
.grayed td {
-webkit-filter: grayscale(0.5);
}
.grayed {
-webkit-filter: grayscale(0.5);
}
.open {
display: initial;
}
td {
padding: 1em;
text-align: center;
background: blue;
}
<table id="t">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td class="toHover">5<br> (Mouse over this)
<div>HELLO</div>
</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<div class="floater">HELLO</div>
How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width.
table {
width: 90%;
}
td {
width: 30%;
}
tr {
/** what should go here? **/
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<table>
You can use the technique described in: Grid of responsive squares.
Adapted to your usecase with a table and square table cells, it would look like this:
table {
width: 90%;
}
td {
width: 33.33%;
position: relative;
}
td:after {
content: '';
display: block;
margin-top: 100%;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: gold;
}
<table>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<table>
FIDDLE demo
Here is my code: http://jsfiddle.net/vRLBY/1/
The key is to use:
td { width: 33%; padding-bottom: 33%; height: 0; }
td div { position: absolute }
because padding-bottom is defined in terms of the width. More information: http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
Note: Previously I posted a not working code (see here). Thanks to #web-tiki for reporting the bug ;-)
If someone's looking for a solution that does not require fixed width property (even in percentage), here's what I came up with based on above answers and the link from approved answer:
td {
height: 0;
&:after, &:before {
content: '';
display: block;
padding-bottom: calc(50% - 0.5em);
}
}
It's kinda lame but it kills two birds with one stone:
does the trick
makes content aligned vertically