I have a problem with table th, I can not set display none to the last th.
Here is my code:
#content-area-job-details #site-content-job-details .entry-content table.job-table tr th:last-of-type{
display:none;
}
when I use this code it set display to none for all th. I want only last th display none.
You can see my problem at:
http://westecmedia.com/?page_id=974
Help me please
This doesn’t work that way. :last-child or :last-of-type are always relative to the parent container. So in case of a table, that’s the tr element. If you match all tr elements in the table, and then get the last th for each, then you are matching every last th in each of those rows. So in your case, essentially all ths.
You would need to have a way to select that one tr which you are interested in, but other than maybe :nth-last-child(2), there is not really a good way to get that one. You should add an actual class to it.
Note that just hiding the th will not give you the desired result though. Table cells are always table cells, and unless you make them take more than a single cell, they will only ever occupy a single cell. So in your case, if you hide or remove that one th, the following td will not fill the whole row. It will only fit that very small cell where the th was previously located. You would have to add colspan="2" to the td in the markup to fix that.
You should use javascript to do what you need...
(function(window) {
'use strict';
function hideLastTh() {
var lastElement;
try {
lastElement = window
.document
.querySelector('.job_info')
.parentElement
.parentElement
.querySelector('th[scope="row"]')
;
lastElement
.classList
.add('hidden')
;
} catch(e) {
console.error('hideLastTh:ERROR', e);
}
}
return window.document.addEventListener('DOMContentLoaded', hideLastTh);
})(window);
I can see that your site uses jQuery. If you can add jQuery code, just add these two lines:
$("th:last").hide();
$("th:last").siblings("td").attr("colspan","2");
Related
couldn't find anything so here's my Markup:
<style>
table {
width:300px;
border-collapse:collapse;
}
th.price
{
text-align:right;
background:yellow;
}
th, td
{
border:1px solid #aaa;
}
</style>
<table>
<thead><tr><th>Item</th><th class="price">Price</th></tr></thead>
<tbody>
<tr><td>Item1</td><td>12.30</td></tr>
<tr><td>Item2</td><td>23.40</td></tr>
<tr><td>Item2</td><td>45.60</td></tr>
</tbody>
</table>
https://jsfiddle.net/2b67rw5o/
Desired output:
So I don't want to apply .price to each table cell or use :nth-child or jQuery .. would it be possible with css only?
I don’t think you can apply a class to td elements based on the class applied to a th element, in css.
You don’t want to use jQuery, but you can use vanilla javascript:
const cssClass = "price";
const th = document.getElementsByClassName(cssClass)[0];
const thead = th.parentElement;
const idx = Array.prototype.indexOf.call(thead.children, th);
const tbody = th.parentElement.getElementsByTagName("tbody")[0];
Array.prototype.forEach(tbody.getElementsByTagName("tr"), tr => {
tr.children[idx].classList.add(cssClass)
})
I don't think what you want to do is possible in CSS today. Although it was often requested, you can't travel (at least now) over parents with CSS selectors because CSS cannot pass information upwards in the DOM hierarchy. But this specific feature would be the minimum requirement to determine the index of the children in the following rows that need to be styled.
For more on that see the answer of "Is there a CSS parent selector?", which is stating "There is currently no way to select the parent of an element in CSS. (...) That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability."
With the currently drafted :has() you could at least build a repetitive CSS solution with a finite column count like this:
/* For a column of three columns maximum: */
/* if price is first column */
table:has(thead > th.price:first-child) tbody > td:first-child,
/* if price is second column */
table:has(thead > :first-child+th.price) tbody > :first-child+td,
/* if price is third column */
table:has(thead > :first-child+*+th.price) tbody > :first-child+*+td {
...
}
Crappy, I know... but currently the only native CSS solution in a possible foreseeable future.
But for now depending on what you need, you could also "cheat": If the background and/or border of the column should be changed you can use styling of the th header cell only (e.g. by abusing :before and :after). But text content specific changes would be quite impossible without JavaScript.
Can I add date-add at the tbody td of the div with class fc-content-skeleton table? coz only the thead td has a data-date, can we data-date at it also?
It is a bit tricky, but here's one way to do it.
Working JSFiddle.
Fullcalendar has several callbacks where you can execute arbitrary Javascript. So you can use one of those callbacks to iterate over all the elements you want and add the data attributes you want.
I used the eventAfterAllRender callback below. Initially I tried using the (more logically suitable) viewRender callback, but it seems the tbody td elements do not actually exist at that point, so you can't find or modify them.
$('#calendar').fullCalendar({
eventAfterAllRender: function (view) {
var row, cell, date;
// First iterate over each calendar row
$('.fc-content-skeleton').each(function(i) {
row = $(this);
// Now iterate over each header cell within this row
$('thead td', row).each(function(k) {
cell = $(this);
// Get the date attribute from the current thead td
date = cell.data('date');
// Find the matching tbody td, at the same index 'k'
// as our current thead td, and add the data attribute.
$('tbody td', row).eq(k).data('date', date);
// Since the data attribute won't be visible in the source,
// temporarily add the actual date to the cell to confirm
// it is really working. Remove this once you can see it works.
$('tbody td', row).eq(k).html(date);
});
});
}
});
I have a relatively long table. Each record has six rows. So an item with an identifier of 16 has <tr-16-1><tr-16-2>.....<tr-16-6>, identifier 25 would be <tr-25-1><tr-25-2>.....<tr-25-6>, etc.
I would like the page breaks to not split any grouping of the six rows. So if <tr-25-6> would continue on a new page, I would like all <tr-25's> to break with it.
I can easily attach a class to all six rows if that would help. Can anyone please point me in the right direction on how to do this? Thanks so much for your help.
A possibility is grouping all the rows that are referring to the same record inside a single tbody, so you have more tbody each one containing 6 rows (it's perfectly fine and seems to be logical as an atomic group),
then add this rule for media print
#media print {
tbody {
page-break-inside: avoid;
}
}
In this way a page break inside a tbody will be avoided.
Unfortunately page-break-inside is supported on every modern browser except Firefox (Bug #132035)
I would give this a shot:
#media print {
tr, td, th { page-break-inside:avoid }
}
If you don't want to use the #media tag, this is another way:
Add class=print-entire to your table, and add this style:
table.print-entire tr td, table.print-entire tr th {
page-break-inside: avoid;
}
I don't know exactly how I can describe this? I think its better if you look at the jsfiddle I have made..
As you can see there is a hover on some TR elements and if the TD already has another bgcoler it has to change to an alternative bgcolor..
It works fine in the first 3 rows, but if there is nested a new table deeper in the DOM the green TD's in the new table does always have the :hover class
jsfiddle
http://jsfiddle.net/VvZuV/1/
Change this:
tr:hover td.green, tr.deep:hover td.green {
background:#7bcf81;
}
To this:
tr:hover > td.green, tr.deep:hover > td.green {
background:#7bcf81;
}
No new class needed.
http://jsfiddle.net/rCztp/
Explanation
As soon as you hovered over the <tr> that contained the <table>, all children, grand-children, and etc, were affected by your css rule. Using > means that only children will be affected.
Basically I have a theme in my ASP.NET application and it contains a css file that turns all my tables blue, which looks great.
It looks like this
table
{
background-color: #DEF1FF;
border-color: #DEF1FF;
color:#5793C9;
}
td
{
// TD properties
}
But now I want one table to be a different colour. I created a class to override it:
.BlankTable
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
I set a <table class="BlankTable"> and I have two problems:
firstly, if I put another table inside that one, it does not inherit BlankTable but uses the original table part of the css file
secondly, if I use the td part to set a td specific property (like padding), it doesn't carry across - <table class="BlankTable><tr><td>hello world</td></tr></table> results in the using the td I put in the CSS file.
Ideally what I want is to set my CSS code like this:
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
table { // properties }
td { // properties }
}
so it uses the table/td properties I specify for the .Blank css class. Is there any way to do this or to refactor my code somehow so I can have all tables looking blue by default, and be able to override it easily?
You can do that, but the syntax is :
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
.Blank table { // properties }
.Blank table td { // properties }
These last 2 rules will match a table and td located inside anything with class "Blank".
Use it like this:
.Blank table {...}
.Blank td {...}
Although I must warn you: there are rare cases where you should use a table inside another table.
The other answers are correct, but it's worth pointing out that this is just one type of CSS selector (the descendant selector). There are all sorts of other CSS selectors that you might want to use to target specific elements.
It's worth getting familiar with them - you might be surprised with what can (and can't) be done. (Using jQuery will also be a lot easier if you are familiar with CSS selectors.)