在 kendo 调度程序议程视图中隐藏 table 列 - 在 Firefox/Chrome 中有效，但在 IE11 中无效

Question

我试图使用以下 CSS.

在 kendo 调度程序议程视图中隐藏时间列

.k-scheduler-timecolumn{
    visibility:collapse !important;
    width:0 !important;
}

<tbody>
    <tr>
        <td>

            <div style="padding-right: 16px;" class="k-scheduler-header k-state-default">

                <div class="k-scheduler-header-wrap">
                    <table class="k-scheduler-table">
                        <tbody>
                            <tr>
                                <th colspan="1" class="k-scheduler-datecolumn">
                                    Date
                                </th>
                                <th colspan="1" class="k-scheduler-timecolumn">
                                    Time
                                </th>
                                <th colspan="1" class="">
                                    Event
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>

            <div style="height: 525px;" class="k-scheduler-content">
                <table class="k-scheduler-table">
                    <tbody>
                        <tr class="" role="row" aria-selected="false">
                            <td class="k-scheduler-datecolumn k-first" rowspan="1">
                                <strong class="k-scheduler-agendaday">27</strong><em class="k-scheduler-agendaweek">Friday</em>

                                <span class="k-scheduler-agendadate">
                                    March, 2015
                                </span>
                            </td>
                            <td class="k-scheduler-timecolumn">

                                <div>
                                    9:00 AM-5:00 PM
                                </div>
                            </td>
                            <td>

                                <div class="k-task" title="This is a title" data-uid="478d253e-a46d-40e8-9194-4dbb70d752a9">

                                    <span class="k-scheduler-mark" style="background-color:#ADC4CC">
                                    </span>blah blah blah
                                </div>
                            </td>
                        </tr>
                        <tr class="" role="row" aria-selected="false">
                            <td class="k-scheduler-datecolumn k-first" rowspan="1">
                                <strong class="k-scheduler-agendaday">28</strong><em class="k-scheduler-agendaweek">Saturday</em>

                                <span class="k-scheduler-agendadate">
                                    March, 2015
                                </span>
                            </td>
                            <td class="k-scheduler-timecolumn">

                                <div>
                                    9:00 AM-5:00 PM
                                </div>
                            </td>
                            <td>

                                <div class="k-task" title="This is a title" data-uid="fcafd1c1-1c96-4b78-a286-b98264fffe0d">

                                    <span class="k-scheduler-mark" style="background-color:#ADC4CC">
                                    </span>blah blah blah
                                </div>
                            </td>
                        </tr>
                        <tr class="" role="row" aria-selected="false">
                            <td class="k-scheduler-datecolumn k-first" rowspan="1">
                                <strong class="k-scheduler-agendaday">30</strong><em class="k-scheduler-agendaweek">Monday</em>

                                <span class="k-scheduler-agendadate">
                                    March, 2015
                                </span>
                            </td>
                            <td class="k-scheduler-timecolumn">

                                <div>
                                    8:00 AM-4:00 PM
                                </div>
                            </td>
                            <td>

                                <div class="k-task" title="This is a title" data-uid="fad7d9d9-94e0-4927-8497-4892919d7659">
                                    blah blah blah
                                </div>
                            </td>
                        </tr>
                        <tr class="" role="row" aria-selected="false">
                            <td class="k-scheduler-datecolumn k-first" rowspan="1">
                                <strong class="k-scheduler-agendaday">03</strong><em class="k-scheduler-agendaweek">Friday</em>

                                <span class="k-scheduler-agendadate">
                                    April, 2015
                                </span>
                            </td>
                            <td class="k-scheduler-timecolumn">

                                <div>
                                    8:00 AM-4:00 PM
                                </div>
                            </td>
                            <td>

                                <div class="k-task" title="This is a title" data-uid="d29639e6-2eff-4904-9152-a57384f940a3">

                                    <span class="k-scheduler-mark" style="background-color:#92B06A">
                                    </span>blah blah blah
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</tbody>

这适用于 Firefox 和 Chrome。

但在 IE 中，列宽很小但仍然存在。

Answer 1

已知 Internet Explorer 在使用 "visibility: collapse" 时存在问题。

尝试使用：

display: none

或：

visibility: hidden

而不是：

visibility: collapse