{"id":32906,"date":"2017-11-08T12:10:00","date_gmt":"2017-11-08T04:10:00","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=32906"},"modified":"2024-06-10T12:17:45","modified_gmt":"2024-06-10T04:17:45","slug":"styling-layouts","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/","title":{"rendered":"Styling Layouts"},"content":{"rendered":"\n<p class=\"intro-text\">This article describes the styling properties of each component in the Layout\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/layouts.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1853\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/layouts.png\" alt=\"\" width=\"20\" height=\"16\" \/><\/a> group in IFS OI Explorer Studio. For an overview of how styling works, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/\">Overview of Styles in IFS OI Explorer<\/a>.<\/p>\n<h2 class=\"page-subheading\">Grid Layout<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Grid Layout <\/strong>in design mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17915\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base.png\" alt=\"grid-style-base\" width=\"290\" height=\"241\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base.png 290w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-base-48x40.png 48w\" sizes=\"auto, (max-width: 290px) 100vw, 290px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Grid Layout you can change the background colour and styles relating to the cells.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the page background.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<p><strong>2. Cells<\/strong>: Style the appearance of the cells.<\/p>\n<ul>\n<li>Cell Background Colour<\/li>\n<li>Cell Border Colour<\/li>\n<li>Cell Border Width<\/li>\n<li>Cell Border Style<\/li>\n<li>Cell Margin<\/li>\n<li>Cell Padding<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the page background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17932 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1.png\" width=\"236\" height=\"241\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-style1-48x48.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17919\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" alt=\"grid-style-bg-props\" width=\"410\" height=\"66\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-48x8.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the appearance of the cells<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17918\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell.png\" alt=\"grid-style-cell\" width=\"222\" height=\"225\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell.png 222w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-48x48.png 48w\" sizes=\"auto, (max-width: 222px) 100vw, 222px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17920\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop.png\" alt=\"grid-style-cell-prop\" width=\"410\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-cell-prop-48x28.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Precision Layout<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Precision Layout <\/strong>in design mode, with a component added to show the cell.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17924\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base.png\" alt=\"precision-style-base\" width=\"298\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base.png 298w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-150x122.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-base-48x39.png 48w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Precision Layout you can change the background colour and styles relating to the cells containing the added components.<\/p>\n<p><strong>1. Base Style<\/strong>: Style the page background.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<p><strong>2. Cells<\/strong>: Style the appearance of the cells.<\/p>\n<ul>\n<li>Cell Background Colour<\/li>\n<li>Cell Border Colour<\/li>\n<li>Cell Border Width<\/li>\n<li>Cell Border Style<\/li>\n<li>Cell Padding<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Design Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the page background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17927 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1.png\" width=\"236\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-bg1-48x48.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17919\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png\" alt=\"grid-style-bg-props\" width=\"410\" height=\"66\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/grid-style-bg-props-48x8.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the appearance of the cells<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17925 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1.png\" width=\"236\" height=\"242\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-146x150.png 146w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell1-48x48.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17926 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1.png\" width=\"414\" height=\"206\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/precision-style-cell-prop1-48x24.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Table Layout<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/\">Table Layout tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows a\u00a0<strong>Table Layout <\/strong>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32910\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-styles.png\" alt=\"\" width=\"493\" height=\"314\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-styles.png 493w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-styles-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-styles-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-styles-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-styles-48x31.png 48w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/p>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Table Layout you can change the background colour and styles relating to the cells.<\/p>\n<p><strong>1. Header Style<\/strong>: Style the header row.<\/p>\n<ul>\n<li>Header Font Size<\/li>\n<li>Header Font Family<\/li>\n<li>Header Font Colour<\/li>\n<li>Header Font Weight<\/li>\n<li>Header Font Alignment<\/li>\n<li>Header Text Case<\/li>\n<li>Header Background Colour<\/li>\n<li>Header Border Colour<\/li>\n<li>Header Border Width<\/li>\n<li>Header Border Style<\/li>\n<li>Header Margin<\/li>\n<li>Header Padding<\/li>\n<li>Header Height<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>2. Rows<\/strong>: Style the appearance of the rows.<\/p>\n<ul>\n<li>Row Background Colour<\/li>\n<li>Row Border Colour<\/li>\n<li>Row Border Width<\/li>\n<li>Row Border Style<\/li>\n<li>Row Margin<\/li>\n<li>Row Padding<\/li>\n<li>Row Height<\/li>\n<\/ul>\n<p><strong>3. Colour<\/strong>: Style the colour of the table.<\/p>\n<ul>\n<li>Background Colour<\/li>\n<\/ul>\n<p><strong>4. Highlights<\/strong>: Style the alternate row colour when the \"highlight\" option is selected.<\/p>\n<ul>\n<li>Alternate Background Colour<\/li>\n<\/ul>\n<p><strong>5. Selected Row<\/strong>: Colour of the rows that are clicked.<\/p>\n<ul>\n<li>Selected Background Colour<\/li>\n<\/ul>\n<p><strong>6. Hovered Row<\/strong>: Colour of the rows when cursor is hovering.<\/p>\n<ul>\n<li>Hover Background Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the row containing the header<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32911\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header.png\" alt=\"\" width=\"334\" height=\"49\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-48x7.png 48w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32912\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style.png\" alt=\"\" width=\"465\" height=\"497\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style.png 465w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style-140x150.png 140w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-style-45x48.png 45w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the margin of the row containing the header<\/strong><\/em><\/p>\n<p><em><strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32914\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin.png\" alt=\"\" width=\"328\" height=\"73\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-150x33.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-48x11.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/strong><\/em><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32915\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style.png\" alt=\"\" width=\"460\" height=\"37\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style.png 460w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style-150x12.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-margin-style-48x4.png 48w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the padding of the row containing the header<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32917\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding.png\" alt=\"\" width=\"329\" height=\"48\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-48x7.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32916\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style.png\" alt=\"\" width=\"455\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style.png 455w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-header-padding-style-48x3.png 48w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the rows containing the data<\/strong><\/em><\/p>\n<p><em><strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32918\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows.png\" alt=\"\" width=\"327\" height=\"106\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-48x16.png 48w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/strong><\/em><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32919\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style.png\" alt=\"\" width=\"461\" height=\"276\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style.png 461w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-rows-style-48x29.png 48w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the margin of the rows containing the data<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32920\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin.png\" alt=\"\" width=\"381\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin.png 381w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-48x18.png 48w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32921\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style.png\" alt=\"\" width=\"459\" height=\"34\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style.png 459w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style-150x11.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-margin-style-48x4.png 48w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the padding of the rows containing the data<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32922\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding.png\" alt=\"\" width=\"382\" height=\"67\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding.png 382w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-150x26.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-48x8.png 48w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32923\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style.png\" alt=\"\" width=\"457\" height=\"30\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style.png 457w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style-150x10.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style-36x2.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-row-padding-style-48x3.png 48w\" sizes=\"auto, (max-width: 457px) 100vw, 457px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the colour of the table<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32924\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour.png\" alt=\"\" width=\"382\" height=\"66\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour.png 382w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-150x26.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-48x8.png 48w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32925\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style.png\" alt=\"\" width=\"462\" height=\"62\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style.png 462w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-bg-colour-style-48x6.png 48w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the highlight colour of alternating rows<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32927\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate.png\" alt=\"\" width=\"380\" height=\"100\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate.png 380w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-150x39.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-48x13.png 48w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32928\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style.png\" alt=\"\" width=\"458\" height=\"64\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style-150x21.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-alternate-style-48x7.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the colour of the selected row<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32934 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1.png\" alt=\"\" width=\"380\" height=\"61\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1.png 380w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected1-48x8.png 48w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32931\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style.png\" alt=\"\" width=\"457\" height=\"61\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style.png 457w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-selected-style-48x6.png 48w\" sizes=\"auto, (max-width: 457px) 100vw, 457px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the colour of the row the user is hovering over<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-32933 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1.png\" alt=\"\" width=\"380\" height=\"82\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1.png 380w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover1-48x10.png 48w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-32932\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style.png\" alt=\"\" width=\"458\" height=\"61\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-hover-style-48x6.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page lists the Layout components in IFS OI Explorer and how they can be styled.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":17346,"menu_order":17,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[116,488],"class_list":["post-32906","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-layouts","tag-styles","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=32906"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32906\/revisions"}],"predecessor-version":[{"id":67124,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32906\/revisions\/67124"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/18269"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=32906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=32906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=32906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}