In below code, the content inside the element should scale on hover (vertically centered scaling), but the attached absolute positioned pseudo-element (*) should stay in exactly the same place without any scaling. I my code the *-symbol unfortunately is scaling and altering it's position.
Note: While I can't change the HTML markup, I'm free to define the CSS.
table {
margin: 3rem;
}
td {
position: relative;
}
span {
display: inline-block;
}
td div span::before {
position: absolute;
content: '*';
top: -1rem;
left: -4rem;
right: -4rem;
text-align: center;
font-size: 80%;
}
div {
padding: 1rem;
background: lightgreen;
}
div:hover span {
transform: scale(2.6);
}
<table>
<tr>
<td>
<div><span>1</span></div>
</td>
<td>
<div><span>2</span></div>
</td>
<td>
<div><span>3</span></div>
</td>
<td>
<div><span>4</span></div>
</td>
<td>
<div><span>5</span></div>
</td>
</tr>
</table>
Attach the ::before to the div instead of the span:
table {
margin: 3rem;
}
td {
position: relative;
}
span {
display: inline-block;
}
td div::before {
position: absolute;
content: '*';
top: -1rem;
left: -4rem;
right: -4rem;
text-align: center;
font-size: 80%;
}
div {
padding: 1rem;
background: lightgreen;
}
div:hover span {
transform: scale(2.6);
}
<table>
<tr>
<td>
<div><span>1</span></div>
</td>
<td>
<div><span>2</span></div>
</td>
<td>
<div><span>3</span></div>
</td>
<td>
<div><span>4</span></div>
</td>
<td>
<div><span>5</span></div>
</td>
</tr>
</table>
Related
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 am trying to style a table of two rows and sixteen columns to be always square on any screen resolution. So cells are narrow rectangles in portrait layout. I tried the following:
HTML:
<table>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
</table>
CSS:
table {
width:100%;
}
table:after {
content: '';
display: block;
margin-top: 100%;
}
td {
width: 6.25%;
position: relative;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: yellow;
border: 1px solid brown;
}
I found the solution myself but still did not understand it. So my question changes from “How” to “Why”. I also forgot to mention, that I use Bootstrap 4 on this page. So the whole solution is below – it works, I tested. But if I add another <div> before <div class = “square”>, it won’t work. It only works if <div class = “col-*-*> (Bootstrap's class) is before <div class = “square”>.
HTML:
<div class = "row">
<div class = "col-sm-8">
<div class = "square">
<table>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
</table>
</div>
</div>
</div>
CSS:
.square {
width:100%;
height: 100%
}
.square:after {
content: '';
display: block;
margin-top: 100%;
}
table {
width:100%;
height: 100%;
}
td {
width: 6.25%;
position: relative;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: yellow;
border: 1px solid brown;
}
unfortunately, there's no real good way to set the height relative to the elements width yet. One solution you could try is making the width and height static numbers and then use media queries so it doesn't run off the page. something like this:
.table {
width: 100px;
height: 100px;
}
#media (min-width: 768px) {
.table {
height: 300px;
width: 300px;
}
}
#media (min-width: 1200px) {
.table {
width: 500px;
height: 500px;
}
}
To answer that second question:
Bootstrap uses flexbox which unless you specify otherwise will try to fit everything on the same line. If you set flex-wrap: wrap; to that bootstrap class then it should allow things that are 100% to fill that row and bump other stuff up or down.
Lets say we have this table:
<table>
<tr>
<td width="50px">Text crossing two td´s</td>
<td width="50px"></td>
</tr>
</table>
How can the text be on top of the two td´s and follow the size of the tr?
https://jsfiddle.net/roj7w1t4/
Is it possible?
EDIT
I need the borders to stay visible. Therefore i cannot use colspan!
Is it possible to create a span and put it over the td´s?
To make more sense what i am trying to do.. this is a small example of my application: What printable element is better to use than linear-gradient?
THE ELEMENT
<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_105" data-weight="938" data-nr="105" style="width: 159.5px; height: 20px; position: absolute; left: 108px; top: 27.1875px;"><table style="height: 100%;"><tbody><tr style="border 1px solid black;"><td style="width: 34.2px; border-right: 1px dotted black;">105</td><td style="width: 91px; border-right: 1px dotted black;"></td><td></td></tr></tbody></table></div>
The only way I can image doing this is placing an element outside the table and having a container around the table and the element. Then placing the element using position absolute on top of the table.
div {
width: 200px;
position: relative;
}
table {
width: 200px;
}
td {
border: 1px solid red;
height: 40px;
}
span {
position: absolute;
padding: 2px;
z-index: 99;
}
<div>
<span>Lorem ipsum dolor sit amet</span>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
How about changing your html layout? Try to use after pseudo element and position:absolute. This technique saves me in a lot of situation and it's very strong, I think.
div {
border: 1px solid green;
padding: 2px;
position: relative;
width: 150px;
}
div:after {
background: green;
bottom: 0;
content: '';
display: block;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 1px;
}
<div>
This text should cross two td´s
</div>
table {
border: 1px solid black;
}
td {
border: 1px solid red;
}
th {
text-align:center;
}
<table>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td width="50px">This text should cross two td´s</td>
<td width="50px"></td>
</tr>
</table>
You can include the border will be visible.
All the best. For any query please comment.
I am encountering an issue in IE9,10,11 where an ::after pseudo element will not fill 100% of the height of it's td parent.
If the first column in the second row had two lines of text, the pseudo element would fill the full height with no problem. So, I figured that the issue was happening because the td was not filling the height of the tr but that isn't the case.
The first screenshot is Chrome and the second is IE9
HTML
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
CSS
table td {
border-bottom: 1px solid;
}
table td:first-child {
position: relative;
}
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 100%;
display: block;
background-color: orange;
}
Codepen: http://codepen.io/cbier/full/BjpaqB/
P.S. I am using an ::after pseudo-element instead of borders for a special reason and it is a requirement
Thanks!
May be using a single pseudo element for the whole table ?
table {
overflow: hidden;
}
table td {
border-bottom: 1px solid;
}
table tr:first-child td:first-child {
position: relative;
}
table tr:first-child td:first-child:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 1000px;
display: block;
background-color: orange;
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
An alternate way, with background : linear-gradient
table td {
border-bottom: 1px solid;
}
table td:first-child {
background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
You can use following code for it:
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 45px;
display: block;
background-color: orange;
}
it is giving same output in chromeas well as IE 9
I have a html table I am trying to build as formatting for a website banner and menu links. The menu links tags however won't stay at an even size no matter how much size and margin fiddling I do.
<table id="format_table">
<tr>
<th colspan=100>
LOGO
</th>
</tr>
<tr align="center">
<td>Home</td>
<td>Etc</td>
<td>Etc</td>
<td>Etc</td>
</tr>
<tr>
<td>
#RenderBody()
</td>
</tr>
</table>
table
{
background-color: White;
border: 1;
border-width: 1;
margin-left: auto;
margin-right: auto;
width: 85%;
}
th
{
text-align:center;
margin-left: auto;
margin-right: auto;
width: 80%;
}
td
{
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 0 5 0 5px
}
Try this one:
td { width:100px; height:50px; }