Change datable background color

Question

Change datable background color

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have some datatables that I want to change the background color on a specific page, so add a style to change it:

table.display tbody:hover td{
background-color: red !important;
}

I do it this way but it only changes the color when the cursor is positioned in the tables. I'm doing it for css because jquery did not work for me. Try this way:

for (i = 0; i < 6; i++) { 
     $('td', newrow).eq(i).css("background-color", "#6600cc !important");
}

But nothing, there are no changes of color in the tables.

javascript jquery css

asked by Kinafune 10.10.2018 в 22:57

source

2 answers

Validate Inputs by jquery and validate them with jquery validator? Python: re.findall does not display digit strings correctly

score 0 · Answer 1

You can use this waterfall, you just have to make sure that the table has the name of the class "display" as you specify it: Let's say this is the case of your table:

<table class="table display table-bordered table-hover dt-responsive">
... y demás código html de la tabla.

The waterfall may look like this:

<style>
  .table.display  tbody tr:nth-child(odd) td,
  .table.display tbody tr:nth-child(odd) th {
   background-color: #F2DEE0;
   }

  .table.display tbody tr:nth-child(even) td,
  .table.display tbody tr:nth-child(even) th {
  background-color: #8D3841;
  color:#fff;
  }
</style>

score 0 · Answer 2

You can do it through styles, as shown below

table { 
  width: 100%;
  text-align: left;
  background-color: lemonchiffon;
  border-collapse: collapse; 
}
table th { 
  background-color: goldenrod;
  color: white; 
}
table td, 
table th{ 
  padding: 10px;
  border: 1px solid goldenrod; 
 }

<table>
	<tr>
		<td>Item 1</td>
		<td>Item 2</td>
		<td>Item 3</td>
	</tr>
	<tr>
		<td>Item 1</td>
		<td>Item 2</td>
		<td>Item 3</td>
	</tr>
	<tr>
		<td>Item 1</td>
		<td>Item 2</td>
		<td>Item 3</td>
	</tr>
</table>