Published in WordPress
avatar
3 minutes read

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.

Comments