桌子在打印时会混乱

Question

我正在努力打印桌子。我有一个系统，当用户点击它时我会显示/隐藏不同的位置。

这是一些html代码（来自firebug）

每个带有课程位置信息的div包含一个包含课程及其学生的表格以及其他一些信息。请注意，第一个.location-info div的显示设置为none（因为用户在单击时隐藏了它）。当代码看起来如上所示并且我进行预览时，它看起来像这样（ NOT ALL NAMES 会显示，并且由于某种原因，表格会以某种方式混乱）：

但当两者 .location-info divs设置为display：block（当用户点击并显示两个位置时），则它看起来像这样：（显示所有名称< /强>）

以下是用于打印的CSS：

@media print {
    #adminmenuback {display:none;}
    #adminmenuwrap {display:none;}
    .screen-reader-shortcut {display:none;}
    #wpadminbar {display:none;}
    .update-nag {display:none;}
    #wpfooter {display:none;}
    #wpbody {width:100%;}
    #wpcontent {margin:2em;}
    #wpbody-content {padding-bottom:0;}
    .change-reserver_user {display:none;}
    .print-link {display:none;}
    .admin-email-links {display:none;}
    .toggle-minus-plus-admin {display:none;}
    h3.location {display:block;}
    #screen-meta {display:none;}
    .screen-only {display:none;}
    #course-header {display:none;}
    .print-only {display:inline-block;}     
    #user-list .location-info.selected-for-print .form-table.courses {border:10px solid red;page-break-after: always;}
}

我显然希望它显示所有名称，即使只有一个.location-info可见。我如何实现这一目标？我做错了什么？