如何将DataTables中details-control类的:before图标改为蓝色（响应式样式）

Got it, let's get that arrow icon switched to the blue style matching DataTables' responsive mode! The key here is that pseudo-element styles are controlled via CSS, so we just need to override the default gray color with a custom rule.

Step 1: Add Custom CSS #

Drop this CSS into your page's <style> tag or external stylesheet. It targets the details-control's :before pseudo-element and sets it to the blue shade used in DataTables' responsive components:

/* Override default details-control arrow color */
table.dataTable td.details-control:before {
    color: #1177dd; /* This matches DataTables' standard responsive blue */
}

/* Keep the arrow blue when the row is expanded */
table.dataTable tr.shown td.details-control:before {
    color: #1177dd;
}

Step 2: Integrate With Your Existing Code #

Your JavaScript already handles the row expand/collapse logic perfectly—just add the CSS above, and you're good to go. Here's the full working example including the missing format function (since your code calls it but doesn't define it):

<style>
table.dataTable td.details-control:before {
    color: #1177dd;
}
table.dataTable tr.shown td.details-control:before {
    color: #1177dd;
}
</style>

<table id="example" class="display" style="width:100%"></table>

<script>
$(document).ready(function() { 
var table_data = [{"name":"Tiger Nixon","position":"System Architect","salary":"$320,800","start_date":"2011/04/25","office":"Edinburgh","extn":"5421"},{"name":"Garrett Winters","position":"Accountant","salary":"$170,750","start_date":"2011/07/25","office":"Tokyo","extn":"8422"},{"name":"Ashton Cox","position":"Junior Technical Author","salary":"$86,000","start_date":"2009/01/12","office":"San Francisco","extn":"1562"}]; 
var table = $('#example').DataTable( { 
"data": table_data, 
"columns": [ 
{ "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, 
{ "data": "name" }, 
{ "data": "position" }, 
{ "data": "office" }, 
{ "data": "salary" } 
], 
"order": [[1, 'asc']] 
} ); 
// Add event listener for opening and closing details 
$('#example tbody').on('click', 'td.details-control', function () { 
var tr = $(this).closest('tr'); 
var row = table.row( tr ); 
if ( row.child.isShown() ) { 
// This row is already open - close it 
row.child.hide(); 
tr.removeClass('shown'); 
tr.removeClass('highlightExpanded'); 
} else { 
// Open this row 
row.child( format(row.data()) ).show(); 
tr.addClass('shown'); 
tr.addClass('highlightExpanded'); 
} 
} ); 
} );

// Helper function to render row details content
function format ( d ) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Start date:</td>'+
            '<td>'+d.start_date+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Salary:</td>'+
            '<td>'+d.salary+'</td>'+
        '</tr>'+
    '</table>';
}
</script>

Quick Notes #

• The selector table.dataTable td.details-control:before uses higher specificity than DataTables' default styles, so it will reliably override the gray arrow color.
• Feel free to swap #1177dd for any blue hex/RGB value if you want a different shade.
• I added the format function because your original code references it but didn't include it—this ensures the row details render properly when clicked.

内容的提问来源于stack exchange，提问作者Sammy_reus