A bit confused. Please help with tabular layout of recordset

A bit confused. Please help with tabular layout of recordset

  
Morning all..
I have attached 2 images of how the data is layout.. one for the pc and one for mobile.


mobile view:

I want the data to be displayed the same way on mobile, but i am not see any option to customize the table to work like that...

I have tried using the List records option. .but that doesnt seem to give me an option to customize the background and stuff to look as clean as the list table..  any suggestions on how i can fix this ?

also one more thing.. there is a huge vertical gap between the header and the main content.. how can i reduce that spacing ?

Thanks in advance.


Hi Andre,

That is the default behavior for TableRecords. You can copy the css from the TableRecords and create your own class. You would end up with something like this, but you can add your own styles if you want to:

.MyTableRecords_Header {
    color: #999;
    border-bottom: 2px solid #C2C2C2;   
    padding: 5px 0px 10px 10px;
}

.MyTableRecords_Header a,
.MyTableRecords_Header a:link,
.MyTableRecords_Header a:visited {
    color: #999;
}

.MyTableRecords>tbody>tr:hover {
    background: #FAFCFF;
}

.MyTableRecords {
    color: #999;
    border-bottom: 2px solid #C2C2C2;   
    padding: 5px 0px 10px 10px;
}

.MyTableRecords a,
.MyTableRecords a:link,
.MyTableRecords a:visited {
    color: #999;
}

.MyTableRecords>tbody>tr:hover {
    background: #FAFCFF;
}

.MyTableRecords {
    background: white;
    padding: 5px 0px 0px 0px;
    margin-top: 20px;
    border-bottom: 1px solid #C2C2C2;
    border-top: 2px solid #C2C2C2;
}

.MyTableRecords_OddLine, .MyTableRecords_EvenLine {
    border-bottom: 1px solid #C2C2C2;
    padding: 7px 0 7px 10px;
}

.MyTableRecords_OddLine:first-child,
.MyTableRecords_EvenLine:first-child,    
.MyTableRecords:first-child {
    padding-left: 20px;
}

.MyTableRecords_OddLine:last-child,
.MyTableRecords_EvenLine:last-child,    
.MyTableRecords:last-child {
    padding-right: 20px;
}

.MyTableRecords_TopNavigation {
    padding: 5px 0px;   
}

.MyTableRecords_BottomNavigation {
    margin-top: 15px;   
}

.RecordPicture {
    max-width: 100%;
    border: 1px solid #eaeaea;
}

.RecordPicture_Wrapper {
    max-width: 100%;
}

.RecordPicture_Wrapper .RecordPicture {
    display: block;
}

.MyTableRecords .RecordPicture {
    max-height: 40px;
}

After that you must override the styles on the TableRecords properties:



Please note that you might also want to build your own custom responsive rules to give it your custom behavior when going into a tablet or mobile.