我尝试使用以下CSS隐藏kendo Scheduler议程视图上的time列。
.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中,列宽很小,但仍然存在。
已知Internet Explorer存在“可见性:崩溃”的问题。
尝试使用:
display: none
或者:
visibility: hidden
代替:
visibility: collapse
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句