convert inline style css class into class name

public/assets/css/core-extend.css

@@ -1,8 +1,12 @@
 :root,
 [data-bs-theme="light"] {
   --bs-nav-link-font-size: 0.7375rem;
+  --bg-border-color :#f8f6f6
 }
 
 .card-header {
   padding: 0.5rem var(--bs-card-cap-padding-x);
 }
+.table_header_border {
+ border-bottom:2px solid var(--bs-table-border-color) ;
+}

src/components/Directory/ListViewContact.jsx

@@ -105,7 +105,7 @@ const ListViewContact = ({ data, Pagination }) => {
           <div className="dataTables_wrapper no-footer mx-5 pb-2">
             <table className="table dataTable text-nowrap">
               <thead>
-                <tr  style={{    borderBottom: "2px solid var(--bs-table-border-color)"}}>
+                <tr className="table_header_border">
                   {contactList?.map((col) => (
                     <th key={col.key} className={col.align}>
                       {col.label}