html - 在 kendo scheduler 议程 View 上隐藏表列 - 适用于 Firefox/Chrome 但不适用于 IE11

Question

我尝试使用以下 CSS 隐藏 kendo 调度程序议程 View 中的时间列。

.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 存在“可见性:折叠”问题。

尝试使用:

display: none

或者:

visibility: hidden

代替:

visibility: collapse