Hide HTML Form Select on Print - html

Question

I am using DataTables on a HTML table and would like to hide all select and inputs from the table headings.
I have used this code:
#media print{
th select{
display: none;
}
}
But that didn't work.
One example is, in 1 column I have this as the heading:
<th>
All Businesses
<select name='business' id='business'>
<option value=''>All Businesses...</option>
<option value='Business 1'>Business 1</option>
<option value='Business 2'>Business 2</option>
<option value='Business 3'>Business 3</option>
</select>
</th>
Which when printing looks like this:
Ideally I need a solution that means the select isn't in the TH but is in the same position as it is now (just under the "All Businesses" bit). I say this because DataTables has a visibility column which ends up using everything in the th meaning the business names show up in that as well.
Thanks!
This is the full code for the table head:
$label_to_name = array();
$tableRes = $db->query("SELECT * from staff_fields");
$table = "<table class='table' id='table'><thead><tr><th>All Businesses<select name='business' id='business'><option value=''>All Businesses...</option><option value='Business 1'>Business 1</option><option value='Business 2'>Business 2</option><option value='Business 3'>Business 3</option></select></th>";
$trowss = $tableRes->fetchAll(PDO::FETCH_ASSOC);
$js = "";
$i = 1;
foreach($trowss as $trows){
if($trows['type'] == "yesno"){
$search_option = "<select id='".$trows['name']."' name='".$trows['name']."'><option value=''>Select Filter...<option value='Yes'>Yes</option><option value='No'>No</option></select>";
$js .= "var ".$trows['name']."index = ".$i.";
$('#".$trows['name']."').on('change',function(){
oTable.columns(".$trows['name']."index).search($(this).val()).draw();
});
";
}else{
$search_option = "<input type='text' name='".$trows['name']."' id='".$trows['name']."' placeholder='Type to Search...'>";
$js .= "var ".$trows['name']."index = ".$i.";
$('#".$trows['name']."').on('input',function(){
oTable.columns(".$trows['name']."index).search($(this).val()).draw();
});
";
}
$table .= "<div class='table_heading'><th>".$trows['label']."</th>".$search_option."</div>";
$label_to_name[$trows['label']] = $trows['name'];
$i++;
}
$table .= "</tr></thead><tbody>";
HTML Output:
<table class='table' id='table'>
<thead>
<tr>
<th>
All Businesses
<select name='business' id='business'>
<option value=''>All Businesses...</option>
<option value='Business 1'>Business 1</option>
<option value='Business 2'>Business 2</option>
<option value='Business 3'>Business 3</option>
</select>
</th>
<th>First Name<input type='text' name='first_name1459057776924' id='first_name1459057776924' placeholder='Type to Search...'></th>
<th>Last Name<input type='text' name='last_name1459057788088' id='last_name1459057788088' placeholder='Type to Search...'></th>
<th>Job Title<input type='text' name='job_title1459057796608' id='job_title1459057796608' placeholder='Type to Search...'></th>
<th>
Proof of Age on File
<select id='proof_of_age_on_file1459057805910' name='proof_of_age_on_file1459057805910'>
<option value=''>Select Filter...
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</th>
<th>Date of Birth<input type='text' name='date_of_birth1459057814082' id='date_of_birth1459057814082' placeholder='Type to Search...'></th>
<th>Start Date<input type='text' name='start_date1459057824504' id='start_date1459057824504' placeholder='Type to Search...'></th>
<th>
Signed Contract in Place
<select id='signed_contract_in_place1459057835607' name='signed_contract_in_place1459057835607'>
<option value=''>Select Filter...
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</th>
<th>
DBS on File
<select id='dbs_on_file1459057844504' name='dbs_on_file1459057844504'>
<option value=''>Select Filter...
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</th>
<th>DBS Date<input type='text' name='dbs_date1459057856098' id='dbs_date1459057856098' placeholder='Type to Search...'></th>
<th>
References Received
<select id='references_received1459057869650' name='references_received1459057869650'>
<option value=''>Select Filter...
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</th>
<th>
Payroll Info Given to HO
<select id='payroll_information_given_to_ho1459057881692' name='payroll_information_given_to_ho1459057881692'>
<option value=''>Select Filter...
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</th>
<th>Leaving Date<input type='text' name='leaving_date1459057889857' id='leaving_date1459057889857' placeholder='Type to Search...'></th>
<th>
Left
<select id='left1459263499753' name='left1459263499753'>
<option value=''>Select Filter...
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</th>
<th>Next Of Kin (Name, Relationship and Contact Number)<input type='text' name='next_of_kin1459342113034' id='next_of_kin1459342113034' placeholder='Type to Search...'></th>
<th>Medical Condition<input type='text' name='medical_condition1459342141909' id='medical_condition1459342141909' placeholder='Type to Search...'></th>
</tr>
</thead>

Answer 1

The problem that you have is not with your css, but with your HTML.
You should make sure that your <th> tag is inside a <table> <tr> tag, otherwise the browser will change your structure and the #media print will not apply.
You can always check that your html structure is valid using the w3 validator.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
#media print {
th select {
display: none;
}
}
</style>
</head>
<body>
<table>
<tr>
<th>
All Businesses
<select name='business' id='business'>
<option value=''>All Businesses...</option>
<option value='Business 1'>Business 1</option>
<option value='Business 2'>Business 2</option>
<option value='Business 3'>Business 3</option>
</select>
</th>
</tr>
</table>
</body>
</html>