I want that the :hover in CSS will work on the whole row in the table at once (if the mouse will be over the image, so the hover will work on both text and pic - same as if the mouse is over the text), but it only work with specific object (if the mouse is over the text the hover catch only the text without the pic)
.linkFooter {
opacity: 80%;
color: white;
vertical-align: top;
}
.linkFooter:hover {
opacity: 100%;
}
.linkFooter:link {
text-decoration: none;
}
.iconContentFooter {
width: 25px;
height: 25px;
padding-bottom: 10px;
}
<table>
<tr class="linkFooter">
<td>
<a href="tel:+972503303397">
<img src="pics/phone.png" class="iconContentFooter">
</a>
</td>
<td>
<a href="tel:+972*********" class="linkFooter">
<b>
טלפון:
</b> ***-***-****
</a>
</td>
</tr>
<tr class="linkFooter">
<td>
<a href="mailto:****#gmail.com">
<img src="pics/mail.png" class="iconContentFooter">
</a>
</td>
<td>
<a href="mailto:lahavadam#gmail.com" class="linkFooter">
<b>
אימייל:
</b> ****#gmail.com
</a>
</td>
</tr>
</table>
OP Comment:
that the hover works only about the specific object (text/pic) and not the whole row
So for that you need to change the hover from parent to child
Note: remove the class from a because its the same class of tr and it will conflict the styles
.linkFooter td {
vertical-align: top;
}
.linkFooter a {
text-decoration: none;
opacity: 40%;
color: red;
}
.linkFooter a:hover {
opacity: 100%;
}
.iconContentFooter {
width: 25px;
height: 25px;
padding-bottom: 10px;
}
<table>
<tr class="linkFooter">
<td>
<a href="tel:+972503303397">
<img src="https://picsum.photos/200/300" class="iconContentFooter">
</a>
</td>
<td>
<a href="tel:+972*********">
<b>
טלפון:
</b> ***-***-****
</a>
</td>
</tr>
<tr class="linkFooter">
<td>
<a href="mailto:****#gmail.com">
<img src="https://picsum.photos/200/300" class="iconContentFooter">
</a>
</td>
<td>
<a href="mailto:lahavadam#gmail.com">
<b>
אימייל:
</b> ****#gmail.com
</a>
</td>
</tr>
</table>
I have a price list. It's a table with a couple small explainers called <span class="small-text"> for some of the services.
The table also has some headers, <td class="service-header"> for grouping the services.
On a few occasions the explainer <span> is found inside the header <td>, and I can't find the simple solution (I do believe it exist) for excluding .small-text when styling .service-header.
I'm pretty sure that :not(.small-text) fits in somewhere in the header styling. I just can't figure.
tr {
font-family : Arial;
height : 40px;
}
.small-text {
font-size : .8em !important;
color : #6e7271;
}
.price-table .service-header {
font-family : Lora;
font-weight : 600;
font-size : 1.5em;
padding-top : 30px;
line-height : 1;
}
<table class="price-table">
<thead><tr class=""><th></th><th></th></tr></thead>
<tbody>
<!-- … -->
<tr>
<td class="service">
Rotfylling av molarer
<br>
<span class="small-text">
Pris per halvtime.
</span>
</td>
<td class="price">5800 kr</td>
</tr>
<tr>
<!-- This one -->
<td class="service-header">
Protetikk
<br>
<span class="small-text">
Alle priser inkl. bedøvelse og tannteknikk.
</span>
</td>
<td class="price"></td>
</tr>
<tr>
<td class="service">Krone fullkeramisk</td>
<td class="price">6900 kr</td>
</tr>
<!-- … -->
</tbody>
</table>
I don't think that it can be done with CSS only.
Please check the link for more info: MDN: Cascade and inheritance (inherite, initial, unset).
You can do that using JavaScript:
We remove the the .service-header > span.small-text class name .small-text. because the em unit will cause a problem. since it's a relative unit passed on its parent.
We take the .service > span.small-text in JavaScript and the span element in the .service-header element (The one we changed eariler).
We pass both as an argument to a function (copyNodeStyle) that simply takes the .service > span.small-text style and sets the same for .service-header > span.
The Combinator Selectors here matters! Moving elements that we selected as a child to another parent will cause bugs.
var headerSmallText = document.querySelector('.service-header span');
var smallText = document.querySelector('.service .small-text');
function copyNodeStyle(sourceNode, targetNode) {
var computedStyle = window.getComputedStyle(sourceNode);
Array.from(computedStyle).forEach(function (key) {
return targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
});
}
copyNodeStyle(smallText, headerSmallText);
tr {
font-family : Arial;
height : 40px;
}
.small-text {
font-size : .8em !important;
color : #6e7271;
}
.service-header {
font-family : Lora;
font-weight : 600;
font-size : 1.5em;
padding-top : 30px;
line-height : 1;
}
<table class="price-table">
<thead><tr class=""><th></th><th></th></tr></thead>
<tbody>
<!-- … -->
<tr>
<td class="service">
Rotfylling av molarer
<br>
<span class="small-text">
Pris per halvtime.
</span>
</td>
<td class="price">5800 kr</td>
</tr>
<tr>
<!-- This one -->
<td class="service-header">
Protetikk
<br>
<span>
Alle priser inkl. bedøvelse og tannteknikk.
</span>
</td>
<td class="price"></td>
</tr>
<tr>
<td class="service">Krone fullkeramisk</td>
<td class="price">6900 kr</td>
</tr>
<!-- … -->
</tbody>
</table>
I'm trying to edit our Shopify 'New Order Notification' email and create a custom table to organize the information a bit better.
It should look like this on desktop, but I'd like to have the totals lined up with the 'line price' column.
On mobile, it looks like this the totals aren't aligned and the 'totals' table doesn't have a 100% width.
I know I obviously need to add mobile queries, which I tried & removed, I just got tired of trying & brought my issue here.
What styles or edits should I make to make both tables 100% on desktop & mobile, and how do I align the totals with the last column of the top table?
Here's my CSS:
/* general styles */
.main-container {
width: 80%;
}
table, tr, td, th {
border-collapse: collapse;
}
table {
width: 100%;
}
/* table-1-items styles */
.table-1-headers {
background-color: #00a850;
color: white;
font-weight: bold;
border-bottom: 2px solid black;
}
.table-1-headers td {
height: 50px;
vertical-align: middle;
}
.left-justify {
text-align: left;
}
.center-justify {
text-align: center;
}
.header-item {
padding-left: 20px;
}
.item-image,
.item-title,
.item-sku,
.item-price,
.item-qty,
.total-line-price,
.header-item-price,
.header-qty,
.header-line-price {
padding-right: 20px;
}
.spacer {
height: 15px;
}
/* table-2-totals styles */
.table-2-totals {
border-top: 2px solid black;
}
.totals-row-1 {
padding-top: 15px;
}
.order-instructions {
font-weight: bold;
vertical-align: top;
padding: 10px 30px 5px 5px;
white-space: nowrap;
}
.order-instructions span {
background-color: yellow;
font-weight: normal;
}
.totals-header {
font-weight: bold;
text-align: right;
border-left: 2px solid black;
padding-left: 8px;
}
.totals {
text-align: right;
padding-right: 22px !important;
min-width:101px !important;
}
.subtotal-header,
.subtotal-input {
padding-top: 10px;
}
And my HTML:
<p>Hello {{ shop_name }},</p>
<p>{% if customer.name %}<b>{{ customer.name }}</b>{% else %}Someone{% endif %} placed a new order with your store, {{ date | date: "%b %d %I:%M%p" }}:</p>
<div class="main-container">
<table class="table-1-items">
<tr class="table-1-headers" >
<td colspan="2" class="header-item left-justify" >Item</td>
<td class="header-sku left-justify">SKU</td>
<td class="header-item-price center-justify">Item Price</td>
<td class="header-qty center-justify">Qty</td>
<td class="header-line-price center-justify">Line Price</td>
</tr>
{% for line in line_items %}
<tr class="item-line">
<td class="item-image center-justify"><img src="{{ line | img_url: 'thumb' }}" alt="Item Image" /></td>
<td class="item-title left-justify">{{ line.title }}</td>
<td class="item-sku left-justify">{{ line.sku | lowcase }}</td>
<td class="item-price center-justify">{{ line.price | money }}</td>
<td class="item-qty center-justify">{{ line.quantity }}</td>
<td class="total-line-price center-justify">{{ line.line_price | money }}</td>
</tr>
{% endfor %}
<tr class="spacer"></tr>
</table>
<table class="table-2-totals">
<tr class="totals-row-1">
<td rowspan="7" class="order-instructions">ORDER NOTE/SPECIAL INSTRUCTIONS<br><span>{{ note }}</span></td>
<td class="totals-header subtotal-header">Subtotal:</td>
<td class="totals subtotal-input">{{ subtotal_price | money }}</td>
</tr>
<tr>
<td class="totals-header">Tax:</td>
<td class="totals">{{ total_tax | money }}</td>
</tr>
<tr>
<td class="totals-header">Rate:</td>
<td class="totals">{{ tax_line.rate }}</td>
</tr>
<tr>
<td class="totals-header">Discounts:</td>
<td class="totals">{{ discounts_amount | money }}</td>
</tr>
<tr>
<td class="totals-header">Shipping:</td>
<td class="totals">{{ shipping_price | money }}</td>
</tr>
<tr>
<td class="totals-header">Total:</td>
<td class="totals">{{ total_price | money }}</td>
</tr>
</table>
</div>
<br>
<br>
View order {{order_name}}
<br>
{% if fulfillment_aborted %}
<p>The above order was not automatically fulfilled because it was flagged as suspicious.</p>{% endif %}
<br>
{% if has_high_risks? %}<p><b>Security check:</b></p>
<p>This order has a risk of being fraudulent. Review the order in your store's admin and contact the customer to verify their information.</p>
{% endif %}
<br>
<p><b>Customer Email: </b>{{ email }}</p>
<p><b>Customer Company: </b>{{ billing_address.company }}</p>
<br>
<p><b>Payment processing method:</b></p>
<p>{{ gateway }}</p>
<br>
{% if requires_shipping and shipping_address %}
<p><b>Delivery method:</b></p>
{% for shipping_method in shipping_methods %}<p>{{ shipping_method.title }}</p>{% endfor %}
<br>
<p><b>Shipping address:</b></p>
<p>{{ shipping_address.name }}</p>
<p>{{ shipping_address.street }}</p>
<p>{{ shipping_address.city }}, {{ shipping_address.province }} {{ shipping_address.zip }}</p>
<p>{{ shipping_address.country }}</p>
<p>{{ shipping_address.phone }}{% endif %}</p>
<br>
{% if shopify_shipping_enabled %}
<p>Save time and money by fulfilling with Shopify Shipping</p>
{% endif %}
Thanks in advance for any help!
So if tables have no defined height they will keep getting smaller until they can no longer get any smaller, then they stop where they are.
Add this to your CSS
table {
max-width: 800px;
min-width: 500px;
width: 100%;
}
All I'm doing there is telling the tables to be 100% wide, to a maximum of 800px, and a minimum of 500px. (adjust as required)
When you've added this you'll also want to remove the right paddding on the totals for MOBILES
.totals {
padding-right: 0 !important;
}
You also have a style called .main-container which has a max width of 80%... you need to replace that with
.main-container {
width: 100%;
}
I have this JSFiddle: Click here
<table class="findus-main-table">
<tr>
<td>
<img class="static-map" onClick="swap();" id="static-map-id" />
</td>
<td style="text-align: center; vertical-align:bottom; position: relative;">
<span style="font-size: 22px; font-weight: bold;">The address I want here</span>
<!-- the inner table for location and distance and phone number -->
<table style="text-align:left;" cellspacing="10">
<tr>
<td style="vertical-align:top">
<div>
<div>Phone: (613)-123-1234</div>
<div>Distance: 0.123km</div>
</div>
</td>
<td>
<div><b>Store Hours</b>
</div>
<div>Mon - Fri: 8am - 2am</div>
<div>Sat & Sun: 10am - 12am</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
What I want is to position the address to the top while the phone number and hours stays at the bottom. I tried using absolute but it wraps the text of the address which i really dont want.
How can I do it?
besides the fact that you shouldn't be using inline styling, is this what you're looking for?
<span style="font-size: 22px; font-weight: bold;position: absolute;top: 0;left: 0;right: 0;">
FIDDLE
instead of using position:absolute witch should be the last thing anyone should try ,I use vertical-align:top
here is a fiddle.and here is my css :
.address{
text-align:center;
font-size:22px;
text-align: center;
font-size: 22px;
height: 78px;
padding: 0;
vertical-align: top;
}
I have run into following issue. I am displaying a table with data on a page, which is nested in main . Its margin-left isset to 5% (margin-right too) and it has defined width. For some reason when I load the page in Chrome, the left margin is ignored. And here it gets interesting. When I open dev console it gets applied. If I reload the page with console open, it gets broken again. When I turn off any css setting in the console (or basicaly touch anything related to content) it gets fixed again. I am using Unsemantic framework for responsive behavior (only desktop part of it) and I had no trouble with it so far, just this. And since it behaves this strangely, I dont think it has anything to do with the code.
You can see it clearly on this short screencap: http://screencast.com/t/mGotS01iC
Just to be sure, I am posting HTML and CSS for the element:
<table class="grid-90 prefix-5 suffix-5">
<tbody>
<tr>
<th> UserName </th>
<th> Email </th>
<th> Guid </th>
<th> IsUsingTempPasswd </th>
<th> LastLogin </th>
<th> PasswordChanged </th>
<th>Actions</th>
</tr>
<tr>
<td> Administrator </td>
<td> admin#physter.com </td>
<td>
<div class="table-long">00000002-0000-0000-0000-000000000069</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td> venca </td>
<td> venca#mail.cz </td>
<td>
<div class="table-long">00000002-0000-0000-0000-00000000006a</div>
</td>
<td class="cell-checkbox">
<input class="check-box" type="checkbox" disabled="disabled">
</td>
<td> 23.8.2013 12:23:39 </td>
<td> 26.7.2013 12:11:06 </td>
<td class="actions">
Edit
|
Details
|
Delete
|
Reset Password
</td>
</tr>
<tr>
<td colspan="7">
Create New
</td>
</tr>
</tbody>
</table>
Here is CSS for the element:
grid-90 {
float: left;
width: 90%;
}
.suffix-5 {
margin-right: 5%;
}
.prefix-5 {
margin-left: 5%;
}
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
width: 100%;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
Anybody has an idea? I would be grateful for solution that would allow me keep the framework as it is and do not overwrite its behavior...
Width of 90% and the fact that you want the table on center are enough. The edges will be calculated automatically. So your code would look like this:
CSS
grid-90 {
width: 90%; }
.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 {
-moz-box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
table {
border: medium none;
margin-bottom: 2.5em;
margin-top: 1em;
text-align: left;
margin: 0 auto;
}
body {
color: #006666;
font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
}
In HTML remove the names of the two divisions: <table class="grid-90"> I hope that helps!
Only thing needed was a little "hack" - adding float:none !important; to <table> elelemnt was enough.
Thanks to Dragos Sandu who put me up to this - removing float:left from grid-90 class was his idea and first step I tried.