center text of table data connected with colspan="2" with .css " Select td with attribute colspan="2" "
Hello, I have a table in which the colspan="2" attribute connects individual columns in a row.
At the moment, it appears as follows:
Only the text in the connected columns should be centered, but I want the text in the connected columns to be centered in a row.
This row's (unlimited) table data contains the following code.
<tr class="row-4 even">
<td colspan="2" class="column-3 footable-last-column" style="display: table-cell;">unlimited</td>
</tr>
Since the table is automatically generated by the Wordpress plugin tablepress, I am unable to alter its code.
Adding a custom CSS file is what I can do.
I would like to know if it is possible to use.css to select only the table data that has the attribute colspan="2" so that I can use {text-align: center} exclusively for table data that has that attribute.
Solutions
You want the CSS selector [attribute="value"], so you should add
td[colspan="2"] {
text-align: center;
}
You want the CSS selector [attribute="value"], so you should add
td[colspan="2"] center for text-align;
to place the cell that crosses two columns in the middle.
Cells that span any number of columns can be centered using
td[colspan]:not([colspan="1"]) {
text-align: center;
}
to pick out every cell with a colspan attribute set to something other than 1.