CODEWITHSUNDEEP
htmlcss
Kgn-web
Kgn-web

Reputation: 7565

How to apply this style

In my website, text is dynamically appended to the page.

My need if the td has attribute has colspan=2, apply text-align:center.

tblCustomers tr td 
{
   padding-left:25px;
}
//how do I do this
tblCustomer tr td:hasattribute(colspan=2)
{
   text-align:center;
}

Note:-

Upvotes: 1

Views: 64

Answers (6)

aavrug
aavrug

Reputation: 1889

Just added width: 100% to your table so you see visualize the effect properly.

.tblCustomer
{
  width: 100%;
}
.tblCustomer tr td[colspan="2"]
{
  text-align:center;
}
<table class="tblCustomer">
  <tr>
    <td colspan="2">Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
</table>

Upvotes: -1

Ahuva
Ahuva

Reputation: 43

in order to apply a style to all td's with a specific colspan, you can use the following selector:

td[colspan="2"]

or more specifically: 

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

source: https://www.w3.org/TR/1998/PR-CSS2-19980324/selector.html

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8407

add this style , make sure to define this tblCustomer class or id , for eg: I've put this as class

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

Upvotes: 1

Banzay
Banzay

Reputation: 9470

Here is a solution

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

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

add this way

tblCustomers tr td {
  padding-left:25px;
}

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

https://jsfiddle.net/nsse87c4/

Upvotes: 2

Quentin
Quentin

Reputation: 944426

Attribute selectors

CSS2 introduced four attribute selectors:

…

[att=val]
Represents an element with the att attribute whose value is exactly "val".

Upvotes: 0

Related Questions