How to add styles to fixed columns?
How to add styles to fixed columns?
JanNL_FR
Posts: 47Questions: 15Answers: 2
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Background color on fixed columns is not changing.
Hi,
I'm new here.
What do I have to do to get a background color to the "th" and a fixed width for those fixed columns?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css" />
<style>
/* Ensure that the demo table scrolls */
th, td {
white-space: nowrap;
}
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
table.dataTable th {
background-color: #000;
color: yellow;
}
</style>
</head>
<body>
| First name | Last name | Position | Office | Age | Start date | Salary | Extn. | |
|---|---|---|---|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | 61 | 2011-04-25 | $320,800 | 5421 | t.nixon@datatables.net |
| Garrett | Winters | Accountant | Tokyo | 63 | 2011-07-25 | $170,750 | 8422 | g.winters@datatables.net |
| Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009-01-12 | $86,000 | 1562 | a.cox@datatables.net |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012-03-29 | $433,060 | 6224 | c.kelly@datatables.net |
| Airi | Satou | Accountant | Tokyo | 33 | 2008-11-28 | $162,700 | 5407 | a.satou@datatables.net |
| Brielle | Williamson | Integration Specialist | New York | 61 | 2012-12-02 | $372,000 | 4804 | b.williamson@datatables.net |
| Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012-08-06 | $137,500 | 9608 | h.chandler@datatables.net |
| Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010-10-14 | $327,900 | 6200 | r.davidson@datatables.net |
| Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009-09-15 | $205,500 | 2360 | c.hurst@datatables.net |
| First name | Last name | Position | Office | Age | Start date | Salary | Extn. |
</body>
</html>
This question has an accepted answers - jump to answer
Answers
Use the browser's inspect tool to find the header of the fixed column. This will allow you to see the selector to use. In chrome I right clicked and used
Copy Selector. I modified that to remove the non-fixedColumn classes then added the styling needed. For example:https://live.datatables.net/yehuxeni/1/edit
Kevin