Row background colour

Row background colour

Gaz96Gaz96 Posts: 20Questions: 6Answers: 1

Whats the easiest way to change the background colour of the row stripe?

Answers

  • allanallan Posts: 63,791Questions: 1Answers: 10,513 Site admin

    If you just want to change the tint:

    :root {
      --dt-row-stripe: 255, 0, 0;
    }
    

    where the value is an rgb value, comma separated.

    If you want complete control this is the CSS to overrule:

    table.dataTable.stripe > tbody > tr.odd > *,
    table.dataTable.display > tbody > tr.odd > * {
      inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.023)
    }
    

    Assuming of course that you are using the DataTables default styling.

    Allan

  • Gaz96Gaz96 Posts: 20Questions: 6Answers: 1

    Magic. Where do I put that code??

  • allanallan Posts: 63,791Questions: 1Answers: 10,513 Site admin

    In a style tag, or a custom CSS file if you have one.

    Allan

  • Gaz96Gaz96 Posts: 20Questions: 6Answers: 1

    Hi Allan

    I added the following in between the head tags but to no avail - sorry for my ignorance:
    <style type="Text/CSS">
    :root {
    --dt-row-stripe: 255, 0, 0;
    }
    </style>

  • allanallan Posts: 63,791Questions: 1Answers: 10,513 Site admin

    That seems to work okay for me here: https://live.datatables.net/visoliha/1/edit .

    As I say, it is a tint only. If you want complete control, you need to override the CSS DataTables is using.

    Please link to a page showing the issue if you are still having problems with it.

    Allan

  • Gaz96Gaz96 Posts: 20Questions: 6Answers: 1
  • Gaz96Gaz96 Posts: 20Questions: 6Answers: 1

    Oh, cracked it. Needed a reference to <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />

    Thanks so much for your help
    Gary :-)

  • allanallan Posts: 63,791Questions: 1Answers: 10,513 Site admin

    Oh - were you using an old version? Yes, that way of controlling the stripe colour was quite new.

    Good to hear you got it done.

    Allan

This discussion has been closed.