I need to hide “for 1 year” in the following, using css:
<tr class=”order-total recurring-total”>
<th rowspan=”1″>Recurring total</th>
<td data-title=”Recurring total”>
<strong><span class=”woocommerce-Price-amount amount”><span class=”woocommerce-Price-currencySymbol”>$</span>425.00</span></strong> for 1 year
<div class=”first-payment-date”><small>First renewal: July 4, 2020</small></div>
</td>
</tr>
my editor requires me to set it up something like:
.recurring-total {
display: none;
}
But that hides everything, which I don't want. Any help much appreciated!
First of all, you have errors: Change all occurrences of ” to ".
Then just change the visibility of the td to hidden and all the texts you want visible inside it to visible. That will do.
.recurring-total td[data-title='Recurring total'] {
visibility: hidden;
}
.recurring-total td[data-title='Recurring total'] * {
visibility: visible;
}
<table>
<tr class="order-total recurring-total">
<th rowspan=”1″>Recurring total</th>
<td data-title="Recurring total">
<strong><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>425.00</span></strong> for 1 year
<div class="first-payment-date"><small>First renewal: July 4, 2020</small></div>
</td>
</tr>
</table>
Related
Recently, I had a case where the has() selector seemed to provide the answer to a problem. And I found that it isn't. And not because FireFox doesn't support it. (Although that is a problem too.)
To show this I made a codepen lookahead selector is weird
The bit with class v1 is the first solution I came up with. And I have no idea why it doesn't work.
When I saw v1 didn't work, I came up with the alternative with class v2. That also didn't work. But I could at least understand why.
Considering that the halves that did work cover all that I need, I made the one with class v3.
Intrigued by v1 not working, I also made v1a,to see if I could figure out which part of the selection doesn't do what I think it does.
And that shows just how weird has() is. Adding the rule for the background of the table flipped the does/doesn't work on the rules.
Also, by accident, I ended up wildly moving across the elements of the table of v1. And at some moment...both rules started working. For v1a, the same. If you want to see this, just make circles on the v1 table hitting all the tds until you see both spans on the right responding.
I tried with both Chrome and Edge. FireFox simply doesn't support it. And I don't happen to have Safari handy to try it on.
Can anyone give an explanation so I understand what is going on? Preferably with pointers to getting something that works in a way that makes a bit more sense.
td {
border: 1px solid black;
}
table {
background-color: skyblue;
margin: 10px;
}
span {
display: inline-block;
padding: 5px;
}
.v1a:has(td .span1:hover) {
background-color: green;
}
.v1:has(td .span3:hover) tr td .span2, /* Ok */
.v1:has(td .span1:hover) tr td .span4 { /* NOk. Why? */
background-color: red;
}
.v2 tr:has(td .span3:hover)~tr td .span2, /* NOk, but I know why. */
.v2 tr:has(td .span1:hover)~tr td .span4 { /* Ok */
background-color: red;
}
.v3:has(td .span3:hover) tr td .span2, /* Ok */
.v3 tr:has(td .span1:hover)~tr td .span4 { /* Ok */
background-color: red;
}
<table class="v1">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
<table class="v1 v1a">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
<table class="v2">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
<table class="v3">
<tr>
<td>
<span class="span1">1</span>
</td>
<td>
<span class="span2">2</span>
</td>
</tr>
<tr>
<td>
<span class="span3">3</span>
</td>
<td>
<span class="span4">4</span>
</td>
</tr>
</table>
I’ve built a web application and am in the process of making the pages mobile responsive. Specifically, I’m dealing with tables. I found a write up that explains how to make the table switch from horizontal to vertical for tablets and phones which have smaller screens. This works great, but the page has 3 tables and I’m not sure how to adapt the CSS for the 3 different tables.
The write up: https://www.liquidlight.co.uk/blog/article/tables-in-responsive-design/
Code Demo: https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
The portions I’m having trouble with is the labels of the cells. The CSS uses:
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. */
td:nth-of-type(1):before { content: "No Longer with Parish"; }
td:nth-of-type(2):before { content: "Position"; }
td:nth-of-type(3):before { content: "Name, City"; }
td:nth-of-type(4):before { content: ""; }
td:nth-of-type(5):before { content: "Religious Affiliation"; }
td:nth-of-type(6):before { content: "Virtus"; }
td:nth-of-type(7):before { content: "Background Check"; }
td:nth-of-type(8):before { content: "Standard Code of Conduct"; }
td:nth-of-type(9):before { content: "Technology / Social Media"; }
td:nth-of-type(10):before { content: "Youth (under 18) Code of Conduct"; }
}
The CSS adds a cell before each cell in the row which contains a label for the item. This would be fine if all the tables showed the same data and could use the same labels. The problem is that they don’t. The 3 tables all have different numbers of columns as well.
How do I tweak the CSS to differentiate between the 3 tables? Should I use an ID in each of the td cells such as id=”One”; id=“Two”; id=”Three” and then target the td id?
I've tried adding id="one" to the first cell and using the following CSS to add the label, but can't get the label to show:
td#one:before { content: "label"; }
td#one:nth-of-type(1):before { content: "label"; }
#one:before { content: "label"; }
#one:nth-of-type(1):before { content: "label"; }
In the design window of visual studio, the cell is referenced as td#one so I thought that one of the first 2 lines of CSS would work. No label shows. Can someone explain how to reference the cell in order to get the label to show? Once I get that to work, table one will have cells one to nine, table two will have cells ten through nineteen and table three will have cells twenty through twenty-eight.
Maybe instead, I could add the label to the main td cell inside a div that displays none or inline using media queries.
Use nth-child instead of nth-of-type.
th:nth-child(1):before{content:'First Name'}
th:nth-child(2):before{content:'Last Name'}
th:nth-child(3):before{content:'Job Title'}
th:nth-child(4):before{content:'Favorite Color'}
th:nth-child(5):before{content:'Wars or Trek?'}
th:nth-child(6):before{content:'Secret Alias'}
th:nth-child(7):before{content:'Date of Birth'}
th:nth-child(8):before{content:'Dream Vacation City'}
th:nth-child(9):before{content:'GPA'}
th:nth-child(10):before{content:'Arbitrary Data'}
<table border="1">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row">
<td role="cell">James</td>
<td role="cell">Matman</td>
<td role="cell">Chief Sandwich Eater</td>
<td role="cell">Lettuce Green</td>
<td role="cell">Trek</td>
<td role="cell">Digby Green</td>
<td role="cell">January 13, 1979</td>
<td role="cell">Gotham City</td>
<td role="cell">3.1</td>
<td role="cell">RBX-12</td>
</tr>
<tr role="row">
<td role="cell">The</td>
<td role="cell">Tick</td>
<td role="cell">Crimefighter Sorta</td>
<td role="cell">Blue</td>
<td role="cell">Wars</td>
<td role="cell">John Smith</td>
<td role="cell">July 19, 1968</td>
<td role="cell">Athens</td>
<td role="cell">N/A</td>
<td role="cell">Edlund, Ben (July 1996).</td>
</tr>
<tr role="row">
<td role="cell">Jokey</td>
<td role="cell">Smurf</td>
<td role="cell">Giving Exploding Presents</td>
<td role="cell">Smurflow</td>
<td role="cell">Smurf</td>
<td role="cell">Smurflane Smurfmutt</td>
<td role="cell">Smurfuary Smurfteenth, 1945</td>
<td role="cell">New Smurf City</td>
<td role="cell">4.Smurf</td>
<td role="cell">One</td>
</tr>
<tr role="row">
<td role="cell">Cindy</td>
<td role="cell">Beyler</td>
<td role="cell">Sales Representative</td>
<td role="cell">Red</td>
<td role="cell">Wars</td>
<td role="cell">Lori Quivey</td>
<td role="cell">July 5, 1956</td>
<td role="cell">Paris</td>
<td role="cell">3.4</td>
<td role="cell">3451</td>
</tr>
<tr role="row">
<td role="cell">Captain</td>
<td role="cell">Cool</td>
<td role="cell">Tree Crusher</td>
<td role="cell">Blue</td>
<td role="cell">Wars</td>
<td role="cell">Steve 42nd</td>
<td role="cell">December 13, 1982</td>
<td role="cell">Las Vegas</td>
<td role="cell">1.9</td>
<td role="cell">Under the couch</td>
</tr>
</tbody>
</table>
Sorry for the very specific title, couldn't think of how to say it in more general terms.
Assume you have a table and each row contains a cell that has an input, but some input fields have a class of 'DontRemoveMe'. How do you target every row except the 'DontRemoveMe' rows?
Manipulation of DOM Elements requires JavaScript. One way to achieve this is with jQuery:
function remove() {
$('tr:not(.dontRemoveMe)').remove();
}
.dontRemoveMe td {
background-color: green;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="dontRemoveMe">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jon</td>
<td>Jones</td>
<td>33</td>
</tr>
</table>
<button onclick="remove()">Remove rows</button>
CSS (Not Yet Implemented):
Using CSS level 4 selectors, I believe it would be
tr:has(td>input:not(>>.DontRemoveMe))
However, those aren't implemented in any browser. So you would want to use javascript.
Javascript:
// Select all rows that don't contain a input.DontRemoveMe
let rows = Array.from(document.querySelectorAll("tr")).filter(x => !(x.querySelector("input.DontRemoveMe")));
// Add a special class to these rows so we can target them with CSS
rows.forEach(x => x.classList.add("selected"));
td {
padding: 8px; /* Padding for all rows to make background visible */
}
.selected {
background: red;
}
<table>
<tr>
<td><input type="text" value="selected" />
</td>
</tr>
<tr>
<td><input class="DontRemoveMe" type="text" value="not selected" />
</td>
</tr>
<tr>
<td>
<input type="text" value="selected" />
</td>
</tr>
</table>
Here is an old school javascript way.
Find all the tr tags then find any children with class DontRemoveMe, if it doesn't find any add a .hide class to the current row.
But, honestly I'd question the reason you want to do it like this, chances are there is a more sensible way.
var tr = document.getElementsByTagName('tr');
var i = 0;
var length = tr.length
for (; i < length; i++) {
var dontRemove = tr[i].getElementsByClassName('DontRemoveMe')
if (!dontRemove.length) {
tr[i].classList.add('hide')
}
}
td {
color: #ededed;
}
.red {
background-color: #ff3030;
}
.blue {
background-color: #6495ED;
}
.hide {
display: none;
}
<table>
<tr class="red">
<td>Normal</td>
<td>Normal</td>
<td class="DontRemoveMe">Don't Remove Me</td>
</tr>
<tr class="blue">
<td>Can't see me</td>
<td>Can't see me</td>
<td>Can't see me</td>
</tr>
<tr class="red">
<td class="DontRemoveMe">Don't Remove Me</td>
<td>Normal</td>
<td class="DontRemoveMe">Don't Remove Me</td>
</tr>
</table>
I'm trying to style the title from the image tag.
I have search other question but can´t it put working in my project.
But I can´t make any changes.
Someone can give me hand with this pls?
my code:
table.tablesorter tbody tr td a:hover img[title]:after
{
content: attr(title);
padding: 4px 8px;
color: #FFF;
background-color:black;
}
<table class="tablesorter" style="width:98% !important">
<thead>
<tr>
<th>
.....
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
..........
</td>
<td>
<a href="#Url.Action("Edit","Account", new { id=item.UserId })">
<img src="~/Content/images/icon_edit.png" title="Edit"/>
</a>
</td>
</tr>
</tbody>
<tfooter>
</tfooter>
</table>
It should be content: attr(title);, not content: attr(data-title); - you don't have a data attribute.
Also, it seems ::before and ::after pseudo-elements are not defined for img - you may have to use something else:
CSS Content attribute for IMG tag
Working Example (when the image is missing): http://jsfiddle.net/DMAFm/
Another example, with the title on the <a> tag: http://jsfiddle.net/DMAFm/1/
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example