[JENKINS-76309] Use Jenkins mouse-over effects for data tables header

[jenkins-infra-bot]

Datatables should use the same styling that has been introduced in JENKINS-75990.

Currently, we use a totally different styling, it would make sense to use the same styling that has been introduced by ridemountainpig in jenkinsci/jenkins#11016.

Styles that needs to be adapted are located in

data-tables-api-plugin/src/main/webapp/css/jenkins-style.css

Lines 17 to 25 in bf48741

	/* Add rounded border for table header hover */
	table.dataTable thead > tr > th.dt-orderable-asc:hover,
	table.dataTable thead > tr > th.dt-orderable-desc:hover,
	table.dataTable thead > tr > td.dt-orderable-asc:hover,
	table.dataTable thead > tr > td.dt-orderable-desc:hover {
	outline: 1.5px solid var(--bs-table-border-color);
	outline-offset: -5px;
	border-radius: 10px;
	}

.

 

---

Originally reported by drulli, imported from: Use Jenkins mouse-over effects for data tables header

• status: Open
• priority: Minor
• component(s): data-tables-api-plugin
• label(s): help-wanted, newbie-friendly
• resolution: Unresolved
• votes: 0
• watchers: 1
• imported: 20260107-220949

Raw content of original issue

Datatables should use the same styling that has been introduced in JENKINS-75990.

Currently, we use a totally different styling, it would make sense to use the same styling that has been introduced by ridemountainpig in jenkinsci/jenkins#11016.

Styles that needs to be adapted are located in 

  

    

      data-tables-api-plugin/src/main/webapp/css/jenkins-style.css
    
    

        Lines 17 to 25
      in
      bf48741
    
  
  

    


        

          

          
 /* Add rounded border for table header hover */ 
        

        

          

          
 table.dataTable thead > tr > th.dt-orderable-asc:hover, 
        

        

          

          
 table.dataTable thead > tr > th.dt-orderable-desc:hover, 
        

        

          

          
 table.dataTable thead > tr > td.dt-orderable-asc:hover, 
        

        

          

          
 table.dataTable thead > tr > td.dt-orderable-desc:hover { 
        

        

          

          
     outline: 1.5px solid var(--bs-table-border-color); 
        

        

          

          
     outline-offset: -5px; 
        

        

          

          
     border-radius: 10px; 
        

        

          

          
 } 
        
    
  

.


 



  

2 attachments

• Bildschirmfoto 2025-11-25 um 11.41.28.png

  

• Bildschirmfoto 2025-11-25 um 11.42.38.png

  

[Haschwalt29]

I’d like to work on this issue.

I’ll update the DataTables header hover styles to align with the Jenkins core mouse-over effects introduced in jenkinsci/jenkins#11016 (JENKINS-75990).

Please let me know if there’s any preferred approach or additional context I should be aware of before submitting a PR.
Thanks!

[uhafner]

You can also have a look at Jenkins' dashboard column header visualization. It also uses a different highlighting. When making the changes please make sure to provide a visualization for dark and light theme.