asked on

Bootstrap table with yellow background

I need to create a table in my html page & background color should be yellow. I created a div tag with background color yellow but whenever there is data in the table it is getting the default color of bootstrap table class. How do i create a table with yellow background & has same format as bootstrap table class Here is the html code

<div class="col col-md-12 form-control" style="border-style: solid; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; border-width: thin; border-color: #F1DB0B; background-color: #F8F2BB; vertical-align: middle; height: 175px">
  <table id="Grid" class="table table-hover" >
    <thead id="GridHeader">
    <tr id="GridHeaderRow" >
      <th id="ConfigID" class="col-md-6 " scope="col">ID</th>
      <th id="ConfigName" class="col-md-6 " scope="col">Name</th>
    </tr>
    </thead>
    <tbody id="Body">
    <tr data-ng-repeat="ConfigID in ConfigIDs">
      <td id="ID" class="configTextFont">{{ConfigID.ID}}</td>
      <td id="Name" class="configTextFont">{{ConfigID.Name}}</td>
    </tr>
    </tbody>
  </table>
</div>

Open in new window

lenamtl

Hi

First do not use inline style, so remove the inline style and create your own class
also try to use % instead of px this work better with responsive
Note in some rare occasion we may need to use inline style, but this is rare

Remove the inline code and place this code inside anew class .mycustomtable, inside your style.css file

style="border-style: solid; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; border-width: thin; border-color: #F1DB0B; background-color: #F8F2BB; vertical-align: middle; height: 175px"

Open in new window

On your page make sure style.css link is after bootstrap.css, not before.

.mycustomtable {
  /* place css code here */
}

Open in new window

Check the example of Bootstrap dark table
https://getbootstrap.com/docs/4.0/content/tables/#examples

.table-dark {
    color: #fff;
    background-color: #343a40;
}

Open in new window

you can create your yellow table the same way and place it in style.css

.table-yellow {
    color: #fff;
    background-color: #FFFF00 !important;
}

Open in new window

If you need a lot of tables with sort, paging, filter I recommend you to use Datatables https://datatables.net/

Sandy V

ASKER

I moved inline CSS into an existing class. Also my css file is referenced after the bootstrap.css file. I still get the same thing & also i tried with table-dark & it still shows same thing

Here is the new css code

.table-yellow {
  color: black;
  background-color: #FFFF00 !important;
}

Open in new window

Sandy V

ASKER

Any help....

lenamtl

Hi,

Make sure you put the clas to the table

<table class="table table-dark">

Open in new window

<table class="table table-yellow">

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.