Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  •   Snippets

  • Change the Time Field to a Dropdown

  • Trigger Refresh When Integromat Completes

  • Converting an Index Match Setup to Tadabase

  • Set Link Button to Open in a New Tab

  • How to Hide Component Based on “No Records” in Table

  • Change Link Button Color CSS for Active/Hover

  • JS to Show/Hide Components Depending on Multiple Data Fields

  • Google Charts Integration

  • Change the Background Color of 2 Cards if the Numbers Match

  • Save IP Address of Logged in User to the Record

  • Add Logged in User's IP Address to Form

  • Enlarge Thumbnail Images

  • Link Button Pop-up

  • Field Title Language - Based on Logged in Users' Language

  • Filter Tab - Background Color

  • IF 2 Card Component Value's Match - Change Background Colors to Match

  • Show Progress Based on Field Value

  • Export Multiple Tables in a Single File

  • Specify Size of Image Model Popup

  • Refresh Entire Page after Form is Submitted

  • Change Labels Language

  • Run Basic Math in Real Time on a Form

  • Set your Data Table to Auto-Refresh

  • CSS Color Gradient

  • Embed Your App in a Webpage Without iFrame or Embed Code

  • CSS for Table Component Title Text

  • Vertical Text in Columns and Fields

  • Mobile Menu Logo - When Menu is Closed

  • View Record Details on Parent Page

  • Show loading GIF while Action Links Run

  • Show columns based on the Users Role

  • Change Checkbox Size

  • Quick and Easy PDF Preview

  • Card Component - Display Sales - Today vs. Yesterday

  • A Multi-Company Project Management Tool

  • Multi-Item Select for Form Input

  • Set "Inputmode" on a Currency Field to a Decimal

  • Remove Link from Signature Fields in Details Components

  • Change Sub Menu Background Color and Text on Hover

  • Change Image Thumbnail Sizes

  • Change the Default Record Count Text

  • Copy Text on Click

  • Delete Connected Child Records Along with the Parent Record

  • Limit Text- Show more

  • Pause a Redirect of the Form

  • Display Addresses in a Single Line in Table Components

  • CSS Option for Connection Fields in a Form Component.

  • Generate Static Map Image

  • Delete Link on Child Page

  • Convert your Calendar's Language

  • Include “Add New” Text Button When Using "table-style-2"

  • Keep Columns Horizontally side by side on Mobile Devices

  • Using Javascript to Manipulate Records Without Tadabase REST API

  • Hide Columns Based on User Role

  • Add Speech Recognition to Your Form

  • Create an Anchor Link Button

  • Refresh all Tables When Form is Submitted

  • Customize Pagination Colors

  • Keep Active Menu Item Highlighted

  • Remove Background Color on Menu Item Hover and Focus

  • Hide Submit Button Unless all Radio Options are “Yes”

  • Set a date based on a Quarter and Year

  • Hover text - Buttons

  • How to use (space) delimiters in an input-field for numbers in text-field

  • Back Button

  • Customize the Form Submission Dialog Box.

  • Change Theme Button Colors

  • Fire Confetti🎉 When Submitting a Form

  • How to Add Checkboxes to Your Table and Add Logic to Them!

  • Photos in Gallery Display

  • Use Buttons to Search a Date Within a Range

  • Link highlighting Without Underline

  • Hide the Refresh Box and Records Display in a Table.

  • Move Form “Save” Button to Top of Form Page

  • Card Component Enhancement

  • Apply CSS class to PDF Print/Download Button

  • How to Hide Arrows from Input Number

  • Only Show Component if it’s the First Week of the Month

  • Hide Components when there are no Records

  • Multi-Step Background and Number/Icon Text Color

  • Use a Custom Icon in Card

  • Left Align Radio Buttons

  • Table Thumbnail Image Percentage Related Sizing

  • How to Round Filter Tabs

  • Table Style 2

  • Table Style 3

  • Table Style 4

  • Table Style 5

  • Details Style 1

  • Form Style One

  • Form Style 2

  • Form Style 3

  • Form Style Three

  • Form Style 4

  • Form Style 5

  • Animated Save Button - Grab Attention

  • Trigger Submit Button of the Other Form

  • Mask Sensitive Form Values

  • Capitalize First Letter in Fields

  • Change Header Size - Resource Component

  • Wrap Navigation Tabs for Mobile

  • Custom Print

  • Run JavaScript from an HTML Button Onclick Event

  • Record Validation for a Specific Word.

  • Remove "Years" from a Date Formatted as Age

  • Create a Record Entry Alternative to Using a QR Code Scan

  • JSChart Custom Component

  • Concatenate Multi-Select Connections

  • Add Freshdesk for Certain Roles or Pages

  • Hide Specific Part of a Menu Based on Logged in User Status/Role

  • Simple Scraper Setup

  • Validation rule - Validate against a connected field using a pipe

  • Change Button Based on Record Value

  • Hide Menu Links Based on Roles, Status or Logged in Users

  • How to add Delete Functionality Inside a Modal

  • Add a 360 tour to a Page.

  • Create X Amount of Connected Records Based on a Number Field

  • Pre Populate & Disable Date Range

  • Covert Action button to Text when Pushed

  • Access Data Table Records from JS

  • Concat Multiple Checkboxes While Filtering Duplicates

  • Read Receipts for When User Views the Details Page.

  • Number Count in Badge With Extra Filters

  • How to Customize the Language of your Tadabase Charts

  • Save records to Google in batches

  • Override Action Link with Confirmation Popup

  • How to Add Custom Themes to your Tadabase Charts

Categories
Snippets
Table Style 3

Table Style 3

 

The following is a customization to add table style 3 to any table you wish in your app. 

 

Step 1

Add the following code to the header section of your app.
<style>
    /* Table Head CSS */
    .table-style-3 .table-wrap>.table {
        border: 1px solid #ddd;
    }

    .table-style-3 table>thead>tr>th {
        border: none;
        font-family: Montserrat-Medium;
        font-size: 12px;
        color: #fff;
        line-height: 1.4;
        text-transform: uppercase;
        background-color: #333333;
        padding-top: 20px;
        padding-bottom: 20px;

    }

    .table-style-3 table>thead>tr>th:hover {
        color: #fff;
        background-color: #484848 !important;
    }

    .table-style-3 .table-actions {
        background-color: #eaf8e6;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
    }

    .table-style-3 .table-actions .pull-left,
    .table-style-3 .table-actions .pull-right {
        padding: 1rem;
    }

    .table-style-3 table,
    .table-style-3 table>thead>tr>th,
    .table-style-3 table>tbody>tr>th,
    .table-style-3 table>tfoot>tr>th,
    .table-style-3 table>thead>tr>td,
    .table-style-3 table>tbody>tr>td,
    .table-style-3 table>tfoot>tr>td {
        border: none;
        vertical-align: middle;
    }

    /* table striped  Css*/
    .table-style-3 table>tbody>tr:nth-child(even) {
        background-color: #eaf8e6;
    }

    .table-style-3 table>tbody>tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .table-style-3 table>tbody>tr>td {
        font-family: Montserrat-Regular;
        font-size: 14px;
        color: #808080;
        line-height: 1.4;
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .table-style-3 table>tbody>tr>td .allow-inline-edit:hover {
        background-color: #57b846;
        color: #000;
    }

    .table-style-3 table>tbody>tr>td .allow-inline-edit:hover:after {
        color: #333333;
    }


    /* Search box */
    .table-style-3 .input-group input.form-control.input-sm.padder {
        border-right: none;
        border: 1px solid #484848;
    }

    .table-style-3 .input-group-btn {
        border: 1px solid #484848;
        background: none;
        border-left: none;
    }

    .table-style-3 .input-group-btn .btn {
        background: none;
        color: #484848;
        padding: 0px 10px;
    }

    .table-style-3 .input-group-btn .btn:focus {
        outline: none;
    }

    .table-style-3 .input-group-btn .btn:active {
        box-shadow: none;
    }

    /* Multi-select checkbox */
    .table-style-3 input[type='checkbox'] {
        margin-top: -30px;
    }

    .table-style-3 input[type='checkbox'] {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
        width: 20px;
        height: 20px;
        margin: 0;
        margin-right: 1px;
        display: block;
        float: left;
        position: relative;
        cursor: pointer;
    }

    .table-style-3 input[type='checkbox']:after {
        content: "";
        vertical-align: middle;
        text-align: center;
        line-height: 20px;
        position: absolute;
        cursor: pointer;
        height: 20px;
        width: 20px;
        left: 0;
        top: 0;
        font-size: 12px;
        -moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
        border: 1px solid #80808070;
        background: #eaf8e6;

    }

    .table-style-3 input[type='checkbox']:hover:after,
    input[type='checkbox']:checked:hover:after {
        background: #eaf8e6;
        content: '\2714';
        color: #333333;
    }

    .table-style-3 input[type='checkbox']:checked:after {
        background: #eaf8e6;
        content: '\2714';
        color: #333333;
        border: 1px solid #80808070;
    }

    /* Relaod  button */
    .table-style-3 .table-actions .btn-primary {
        background: none;
        color: #2780e3;
        border: 1px solid #2780e3;
    }

    .table-style-3 .table-actions .btn-primary:hover {
        background: #2780e3;
        color: #fff;
        border: 1px solid #2780e3;
    }

    .table-style-3 .table-actions .btn-info {
        background: none;
        color: #9954bb;
        border: 1px solid #9954bb;
    }

    .table-style-3 .table-actions .btn-info:hover {
        background: #9954bb;
        color: #fff;
        border: 1px solid #9954bb;
    }

    .table-style-3 .table-actions .btn-danger {
        background: none;
        color: #ff0039;
        border: 1px solid #ff0039;
    }

    .table-style-3 .table-actions .btn-danger:hover {
        background: #ff0039;
        color: #fff;
        border: 1px solid #ff0039;
    }

    /* edit-delete-detail link Css */
    .table-style-3 a.td-link.td-data-link {
        background: #484848;
        padding: 5px;
        border-radius: 2.4rem;
        text-align: center;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link i.fa {
        color: #eaf8e6;
        width: 15px;
        font-size: 10px;
    }

    .table-style-3 .td-data-link:hover {
        background: none !important;
        color: #eaf8e6;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link:hover i {
        color: #484848;
    }

    /*===============================================================================*/
    /* table-style-3 */
    /* table striped  Css*/
    .table-style-3 table>tbody>tr:nth-child(even) {
        background-color: #e9faff;
    }

    .table-style-3 table>tbody>tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .table-style-3 .table-actions .pull-left,
    .table-style-4 .table-actions .pull-right {
        padding: 1rem;
    }

    .table-style-3 table,
    .table-style-4 table>thead>tr>th,
    .table-style-4 table>tbody>tr>th,
    .table-style-4 table>tfoot>tr>th,
    .table-style-4 table>thead>tr>td,
    .table-style-4 table>tbody>tr>td,
    .table-style-4 table>tfoot>tr>td {
        border: 1px solid #00293338;
        vertical-align: middle;
    }

    .table-style-3 table>thead>tr>th {
        border: none;
        font-family: Montserrat-Medium;
        font-size: 12px;
        color: #fff;
        line-height: 1.4;
        text-transform: uppercase;
        background-color: #002933;
        padding-top: 20px;
        padding-bottom: 20px;
        letter-spacing: 2px;
    }

    .table-style-3 table>thead>tr>th:hover {
        background-color: #1a3f48 !important;
        color: #fe3e64;
    }

    .table-style-3 .table-actions {
        background-color: #e9faff;
        border: none;
    }

    .table-style-3 table>tbody>tr>td {
        font-family: Montserrat-Regular;
        font-size: 14px;
        color: #808080;
        line-height: 1.4;
        padding-top: 18px;
        padding-bottom: 14px;
    }

    /* Search box */
    .table-style-3 .input-group input.form-control.input-sm.padder {
        border-right: none;
        border: 1px solid #484848a3;
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }

    .table-style-3 .input-group-btn {
        border: 1px solid #484848a3;
        background: none;
        border-left: none;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    .table-style-3 .input-group-btn .btn {
        background: none;
        color: #484848a3;
        padding: 0px 10px;
    }

    .table-style-3 .input-group-btn .btn:focus {
        outline: none;
    }

    .table-style-3 .input-group-btn .btn:active {
        box-shadow: none;
    }


    /* Relaod  button */
    .table-style-3 .table-actions .btn-primary {
        background: none;
        color: #2780e3;
        border: 1px solid #2780e3;
        border-radius: 1rem;
    }

    .table-style-3 .table-actions .btn-primary:hover {
        background: #2780e3;
        color: #fff;
        border: 1px solid #2780e3;
    }

    .table-style-3 .table-actions .btn-info {
        background: none;
        color: #9954bb;
        border: 1px solid #9954bb;
        border-radius: 1rem !important;
    }

    .table-style-3 .table-actions .btn-info:hover {
        background: #9954bb;
        color: #fff;
        border: 1px solid #9954bb;
    }

    .table-style-3 .table-actions .btn-danger {
        background: none;
        color: #ff0039;
        border: 1px solid #ff0039;
        border-radius: 1rem;
    }

    .table-style-3 .table-actions .btn-danger:hover {
        background: #ff0039;
        color: #fff;
        border: 1px solid #ff0039;
    }

    .table-style-3 .table-actions .pull-right .btn.disabled {
        background: #002933;
        color: #e9faff;
        opacity: unset;
    }


    /* Multi-select checkbox */
    .table-style-3 input[type='checkbox'] {
        margin-top: -30px;
    }

    .table-style-3 input[type='checkbox'] {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeSpeed;
        width: 23px;
        height: 0px;
        margin: 0;
        margin-right: 1px;
        display: block;
        float: left;
        position: relative;
        cursor: pointer;
        border-radius: 1rem;
        border: 1px solid red;
        bottom: 10px;
    }

    .table-style-3 input[type='checkbox']:after {
        content: "";
        vertical-align: middle;
        text-align: center;
        line-height: 20px;
        position: absolute;
        cursor: pointer;
        height: 20px;
        width: 20px;
        left: 0;
        top: 0;
        font-size: 12px;
        -moz-box-shadow: inset 0 1px 1px #3699FF, 0 1px 0 #3699FF;
        border: 1px solid #80808070;
        background: #e9faff;
        border-radius: 1rem;

    }

    .table-style-3 input[type='checkbox']:hover:after,
    input[type='checkbox']:checked:hover:after {
        background: #e9faff;
        content: '\2714';
        color: #fe3e64;
    }

    .table-style-3 input[type='checkbox']:checked:after {
        background: #e9faff;
        content: '\2714';
        color: #fe3e64;
        border: 1px solid #80808070;
    }


    /* edit-delete-detail link Css */
    .table-style-3 a.td-link.td-data-link {
        background: #1a3f48;
        padding: 5px;
        text-align: center;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link i.fa {
        color: #e9faff;
        width: 15px;
        font-size: 10px;
    }

    .table-style-3 .td-data-link:hover {
        background: none !important;
        color: #eaf8e6;
        border: 1px solid #484848;
    }

    .table-style-3 .td-data-link:hover i {
        color: #fe3e64;
    }
</style>

 

 

Step 2

Add "table-style-3" to any table's CSS selector that you wish to change. 

 

 

 

Original Community Post:

UI/UX CSS works - Community Discussions / Getting Started - Tadabase Community

How did we do ?

Previous Article
Table Style 2
Next Article
Table Style 4
Article Navigation
  • Step 1
  • Add the following code to the header section of your app.
  • Step 2
  • Add "table-style-3" to any table's CSS selector that you wish to change.
  • Original Community Post:
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational