styling tables with rows in different shades

styling tables with rows in different shades

  

How do I style a table with every second row being a different shaded background? 


I.E

1) grey

2)white

3)grey


Is there an inbuilt styling for this in outsystems? 

Solution

Hi Talish,


currently, there is no such class available but you can do this just by some CSS stuff either by putting CSS in page level or you can write selector CSS in the main theme. 



.TableRecords tbody tr:nth-child(odd)  {

background: grey;  /*whatever color you want*/

}

.TableRecords tbody tr:nth-child(even)  {

background: white;  /*whatever color you want*/

}


Regards

Pankaj


Solution

sweet, thanks! 

Pankaj Pant wrote:

currently, there is no such class available but you can do this just by some CSS stuff either by putting CSS in page level or you can write selector CSS in the main theme. 

Hi Talis and Pankaj,

Actually... there is built-in support for this in OutSystems.

The Table Records widget has two properties Odd Line Style and Even Line Style that allow you to specify CSS classes to be applied to the odd and even rows.

By default they come with the predefined classes TableRecords_OddLine and TableRecords_EvenLine respectively, but you can either add more classes to the properties, remove these and add your own or even override the definition of these classes on the stylesheet for your screen, for instance.


Jorge Martins wrote:

Pankaj Pant wrote:

currently, there is no such class available but you can do this just by some CSS stuff either by putting CSS in page level or you can write selector CSS in the main theme. 

Hi Talis and Pankaj,

Actually... there is built-in support for this in OutSystems.

The Table Records widget has two properties Odd Line Style and Even Line Style that allow you to specify CSS classes to be applied to the odd and even rows.

By default they come with the predefined classes TableRecords_OddLine and TableRecords_EvenLine respectively, but you can either add more classes to the properties, remove these and add your own or even override the definition of these classes on the stylesheet for your screen, for instance.


Hi Jorge,

Yes you are correct we have TableRecords_EvenLine and TableRecords_OddLine classes for table we can put our style over there,

But I believe Talish is looking for a class like table-stripped in bootstrap so he need not write custom CSS.



Regards

Pankaj


Pankaj Pant wrote:

Jorge Martins wrote:

Pankaj Pant wrote:

currently, there is no such class available but you can do this just by some CSS stuff either by putting CSS in page level or you can write selector CSS in the main theme. 

Hi Talis and Pankaj,

Actually... there is built-in support for this in OutSystems.

The Table Records widget has two properties Odd Line Style and Even Line Style that allow you to specify CSS classes to be applied to the odd and even rows.

By default they come with the predefined classes TableRecords_OddLine and TableRecords_EvenLine respectively, but you can either add more classes to the properties, remove these and add your own or even override the definition of these classes on the stylesheet for your screen, for instance.


Hi Jorge,

Yes you are correct we have TableRecords_EvenLine and TableRecords_OddLine classes for table we can put our style over there,

But I believe Talish is looking for a class like table-stripped in bootstrap so he need not write custom CSS.



Regards

Pankaj


Hi,


I was happy with either solution, I ended up going with the CSS as I could apply this to the all tables within the development more easily (retrospectively). But it's good to know there's both options. I'm just not proficient enough in CSS to know what to have written. 


Thanks again for both contributions! 


Pankaj Pant wrote:

Hi Talish,


currently, there is no such class available but you can do this just by some CSS stuff either by putting CSS in page level or you can write selector CSS in the main theme. 



.TableRecords tbody tr:nth-child(odd)  {

background: grey;  /*whatever color you want*/

}

.TableRecords tbody tr:nth-child(even)  {

background: white;  /*whatever color you want*/

}


Regards

Pankaj



Hi Pankaj,


Is there anyway to do this styling just to visible rows?

I have a number of rows which I have used the property "display: none:" which means I do not get the alternating shading, is there any way around this?