Jump to content
ajoo

<th> properties via css

Recommended Posts

Hi all !.

I have a table as shown below:

image.thumb.png.b702e6689ec6d7bec0fa49663539ff26.png

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 !

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 !

 

Share this post


Link to post
Share on other sites

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>  

 

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Just give up and use classes.

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

:confused:

Quote

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

This I understand !!:happy-03:

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 !?:happy-04:

Thanks loads !

 

 

 

Share this post


Link to post
Share on other sites
Posted (edited)

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 by ajoo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.