html - 在打印时隐藏 HTML 表单选择

Question

我在 HTML 表格上使用 DataTables，并想隐藏表格标题中的所有选择和输入。

我用过这段代码:

@media print{
    th select{
        display: none;
    }
}

但这没有用。

一个例子是，在 1 列中我将这个作为标题:

<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 中，但与现在处于相同的位置(就在“所有业务”位下方)。我这样说是因为 DataTables 有一个可见性列，它最终会使用 th 中的所有内容，这意味着企业名称也会显示在其中。

谢谢!

这是表头的完整代码:

$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 输出:

<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

您的问题不在于您的 css，而在于您的 HTML。

您应该确保您的 <th>标签在 <table> <tr> 内标记，否则浏览器将更改您的结构和 @media print将不适用。

您始终可以使用 w3 validator 检查您的 html 结构是否有效.

<!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>