0

I have a division question which I'm displaying in a table. Each digit is stored in a "td". I want to reduce the width and remove all the padding of the "td" which contains the "decimal point". But I'm unable to change that particular td without changing the stylings of rest of the columns.

Please note that - I cannot use an ID or a class on the element because of my complex code structure. Only apply new styles to the nth child if it contains decimal point anywhere in the table.

enter image description here

So, I'm trying to do it in the below manner:

tbody>tr>:nth-child(7){
      width:2px !important;
      padding: 0px !important;
      column-width: 8px !important;
}

The above code works fine but it will cause issue if the decimal point is placed anywhere other than the position/child "7" (i.e, in a different column of the divisor or divident).

Another way - not working at all!!!! :-

div[title~="`.`"] {
       width: 12px !important;
       padding: 0px !important;
       column-width: 5px !important;
}

One more way - no styles are getting applied !!!! :-

   tbody>tr>td {
       div.decimalPoint {
         width:2px !important;
         padding: 0px !important;
         column-width: 8px !important;
       }
   }

Please help me find a workaround for this in which I can check whichever "td" contains the decimal point should have 0 padding and reduced width.

Ashmita Singh
  • 69
  • 2
  • 2
  • 11
  • Please include your HTML. – Gerard Jul 26 '23 at 12:36
  • If you use a class like `.decimalPoint` it should work with a rule like `td .decimalPoint { .. }` with a space between the tag and class. No `!important` required. Show a [reprex] as requested before so we can verify where you are going off track in your code. – Rene van der Lende Jul 26 '23 at 13:06
  • If you want to style based on content you’ll need JavaScript. – A Haworth Jul 26 '23 at 14:03

0 Answers0