<th> properties via css

[ajoo]

Hi all !.

I have a table as shown below:

S.No, COL A, COL B, COL C, COL D and Actions are the <th> fields in one row and

and WSes, VSes, TSes and XSes are in the <th> in the next row. The table is exactly as I want but I have to use inline styling to set the text alignment property of the <th>es in the two rows. The first one being center aligned and the 2nd ones right aligned as seen. I wish to do the styling using css and remove the inline styling. Is there a was for me to target the <th>es of the two rows separately and change their text-align properties.

Thanks all !

[requinix]

Give a text-align to the parent <tr> and the cells will inherit it. Unless you have something else in place to override it, of course.

[ajoo]

Hi requinix !

Thanks for the response. There are two <tr><th> .... </th></tr> blocks, one for each of the rows. While the first row should have a centered text, the second row should have it right aligned.

How would it differentiate which tr is being referred to ? Or am I missing something in your answer?

Here's how the HTML goes !

<tr>
  <th style='text-align: center' rowspan=2> S.No.</th>
  <th style='text-align:center' colspan=3> COL A </th>
  .
  .
  <th style='text-align:center' rowspan = 2> Action </th>
</tr>

<tr>
  <th style='text-align:right'> WS </th>
  <th style='text-align:right'> WS1 </th>
  .
  .
  <th style='text-align:right'> VS </th>
  <th style='text-align:right'> VS1 </th>
  .
  .
  .
  <th style='text-align:right'> XS2 </th>
<tr>  

  
    

Kindly clarify,

Thanks loads !

 

[requinix]

Occurs to me I might be misunderstanding exactly what you want aligned center/right, but I'm talking about

<tr style='text-align: center'>
  <th rowspan=2> S.No.</th>
  <th colspan=3> COL A </th>
  .
  .
  <th rowspan = 2> Action </th>
</tr>

<tr style='text-align:right'>
  <th> WS </th>
  <th> WS1 </th>
  .
  .
  <th> VS </th>
  <th> VS1 </th>
  .
  .
  .
  <th> XS2 </th>
<tr>  

 

[ajoo]

Yes that's correct ! But the thing is that this would still be an inline styling and I want to remove that altogether and move it into css because this gives me CSP errors !!

So is there a way to move the styling into CSS and target the text align property of the <tr>s or <th>s from there.

Thanks !

[requinix]

Inline styling is totally okay for very particular things like this. CSP is a mixed bag.

Just give up and use classes.

[ajoo]

Hi !

Since I am using CSP, it does not allow this to be used without the complication of adding a nonce for these. I was hoping to avoid that.

Quote

Just give up and use classes.

Could you please explain cos I am not sure I understand what you mean by this. What classes ? You mean like classes in divs ? Is something like <th class = "someclass" permitted? Haven't seen that for tables.

Thanks !

[requinix]

14 minutes ago, ajoo said:

Since I am using CSP, it does not allow this to be used without the complication of adding a nonce for these. I was hoping to avoid that.

Which is why I added the second line about using classes.

14 minutes ago, ajoo said:

Could you please explain cos I am not sure I understand what you mean by this. What classes ? You mean like classes in divs ? Is something like <th class = "someclass" permitted? Haven't seen that for tables.

You aren't aware that things like IDs and classes can be used everywhere?

[ajoo]

Hi Requinix,

I was not aware that I could use classes inside the <th>, <tr> etc. elements of the tables ?. Thanks for the clarification.

I should be able to sort this then.

Thanks loads !

[ajoo]

Hi,

Shouldn't the class trow1's text-align : center override the default td text-align :left ? Doesn't seem to be doing so. I do believe that the class has a higher specificity than the <td> element of the table?

CSS

     .TFtable td{
                padding:6px;
                border:#4e95f4 1px solid;
                text-align: left;    
        }

     .trow1{

                text-align: center;

       }

 

HTML

	<tr>
				<td class='trow1'>{$din}</td>
				<td class='trow2'>{$wrt1}</td>
				<td class='trow2'>{$wrt2}</td>
				<td class='trow2'>{$wrt3}</td>
      			.
                .
                .
    </tr>

Please advise. Thanks !

[requinix]

Specificity only applies to the elements targeted by rules. If you put the text-align on the TR then that is separate from the text-align on the TD.

But that's not quite the issue here. Aligning the row works because the cells were set to inherit their alignment from their parents. As in text-align:inherit. That's what actually matters. When you gave your text-align:center you removed the inheritance altogether.

[ajoo]

Quote

If you put the text-align on the TR then that is separate from the text-align on the TD.

This I understand !!

Quote

When you gave your text-align:center you removed the inheritance altogether.

So if this destroys the inheritance, then shouldn't the text-align: center set by the class within td work as intended ?

The  thing is that this same table css values works great for many of my tables and don't wish to alter those. In this case since all values of data are numeric I want them right aligned ( there is another class = trow2 { text-align : right}) but there are two values SNo and the Action that I wanted center aligned. So instead of changing the <tr> which affects all other tables i decided to change the <td> values in this particular table.

Can you please show me how would you rectify this !?

Thanks loads !

 

 

 

[ajoo]

Hi Requinix,

I found and read https://css-tricks.com/specifics-on-css-specificity/ and was able to resolve my issue. I too thought that putting a class within the <td > or <th > element , would cause the defaults to be overridden.

I still applied the class to each <th> and <td> element but that's ok.

Thanks Requinix for putting up with my slow grasping !?

Edited March 19, 2019 by ajoo