Answers

• DazedAndConfused Posts: 3Questions: 1Answers: 0

  May 28

  I found a way to change the border line color, but I'm still struggling with the rest.

  Can anyone help me with where to find the proper call for the text in the columns? I need to change the color.
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  May 28

  Generally the best way to workout styling rules for something like this is to right click on the element in question and select "Inspect". The browser will show you what is applied.

  For the following answers I'll assume you are using Bootstrap 5 since you mentioned table-striped.

  1) Which CSS property do I need to modify to change the colors of the striped-table border. (the visible lines between the rows)

  Use the --bs-table-border-color CSS variable that Bootstrap 5 offers.

  2) Which CSS property do I need to modify to change the text color

  -bs-table-color

  3) Which CSS property do I need to modify to change the color of the search box and page numbers

  div.dt-container div.dt-search input {
  
  }
  

  and

  --bs-pagination-color respectively.

  4) How do I modify the margins between the lines? The striped rows did most of it, but I need to adjust it further.

  The cell padding?

  .table > :not(caption) > * > * {
    padding: .5rem .5rem;
  }
  

  is the Bootstrap default.

  5) Whats the best way to change the font/size/color of the column titles? Should it be done through datatables CSS or should I be applying it through the regular stylesheet for the application?

  --bs-table-color-state .

  See the Bootstrap documentation for more details on how they use CSS variables.

  Allan
• DazedAndConfused Posts: 3Questions: 1Answers: 0

  May 30

  Hi Allen, thanks for the help.

  I have been using F12, but when I modify the css in the element that it says its under, none of the styles change. (For example I tried making the background color lime green, and it stayed transparent)

  It is bootstrap 5.0 as far as I know, but I do not see many of these options listed in the datatables.css file when I try to include them. Is there somewhere else they need to go? Things like--bs-pagination-color and -bs-table-color are not shown as recognized attributes.
• allan Posts: 63,523Questions: 1Answers: 10,473 Site admin

  May 30

  If you link to the page in question, or show me what DataTables CSS and JS files you are including I'll be able to say what styling framework you are using.

  Allan