Jump to content

<th> properties via css


ajoo

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 !

Link to comment
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 !

 

Link to comment
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>  

 

Link to comment
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 !

Link to comment
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 !

Link to comment
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?

Link to comment
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 !

Link to comment
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.

Link to comment
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 !

 

 

 

Link to comment
Share on other sites

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 !?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.