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:

enter image description here

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"

2 Answers 2

37

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
  • The best answer on this subject. Thank You. Commented Dec 17, 2018 at 4:37
  • what if i am USING Div and tr class which convert that div to TR tag how to add colspan for div tag which refer as TR
    – ravipatel
    Commented Jan 9, 2023 at 21:40
22

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

<td colspan="2" style="text-align:center;">unlimited</td>
1
  • what if i am USING Div and tr class which convert that div to TR tag how to add colspan for div tag which refer as TR
    – ravipatel
    Commented Jan 9, 2023 at 21:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.