I would like to select all cells in the table header which have the colspan attribute set.
Of course I could do something like:
table thead th[colspan="1"],
table thead th[colspan="2"],
table thead th[colspan="3"] {
}
but I'm looking for something like this:
table thead th[colspan*=""] {
}
which does not seem to work.
Question:
How to select all cells with colspan set in a table?
Thanks!
Just use
table thead th[colspan]
According to the CSS 2.1 spec,
[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
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.
I once found a small piece of CSS code here that let me set the width of a column in a table based on the amount of columns in the table. Sadly my search-fu is not able to give me an answer. So I decided to ask directly.
I remember the CSS code went something like this:
table tr td:nth-of-type(1) ~ table tr td:nth-of-type(3) {
width: 33%;
};
Where the above code would make every column in a table with 3 columns be 33% at width.
table tr td:nth-of-type(1) ~ table tr td:nth-of-type(4) {
width: 25%;
};
And with this every column in a table with 4 columns be 25% width.
I have used .table-striped class for one of my tables. Unfortunately, I use more tables inside this table, which also became striped.
How to make inner tables be not striped?
Why not create a new style much like .table-striped and use the immediate child selector [>] [MDN link]1 so it only selects the immediate tr and not all the tr children in the table?
.table-striped__immediate-only > tbody > tr:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
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");
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;
}