center text of table data connected with colspan=“

2020-06-30 05:26发布

问题:

Hi I have a table where certain columns in a row are connected with the colspan="2" attribute.

In the moment it looks like this:

I want that the text of the connected columns in a row is centered, but only the text in the connected columns

The table data of this row (unlimited ) has the following code

<tr class="row-4 even">    
<td colspan="2" class="column-3 footable-last-column" style="display: table-cell;">unlimited</td>
</tr>

I can not change the code of the table because it is automatically created by the Wordpress plugin tablepress

What I can do is to add a custom .css file.

My Question is, if it is possible to select only the table data with the attribute colspan="2" with .css, so that I can do { text-align: center } only for table data with the attribute colspan="2"

回答1:

The CSS selector [attribute="value"] is what you want, so you should add

td[colspan="2"] {
    text-align: center;
}

to center the cell that spans two columns.

If you want to center cells that span any number of columns, you can use

td[colspan]:not([colspan="1"]) {
    text-align: center;
}

to select all cells that have a colspan attribute set to a value other than 1.



回答2:

This should do the trick if you are applying the CSS inline:

<td colspan="2" style="text-align:center;">unlimited</td>