Question

我有一个每小时的时间轴类型视图，这是一个表，然后我有活动沿着时间线延伸，只要活动是。 timeline view

它工作正常，直到我达到某些浏览器尺寸，即iPad中的div将开始溢出到其他时间。他们应该停在红线上，因为事件发生在12点以后。

问题是，如何让div调整大小以保持在他们的范围内？

我正在使用Bootstrap 3.2和Metronic模板

谢谢！

这是代码。

<div class="row">
<div class="col-md-12" id="EventsDiv">
  <table class="table table-bordered" style="width:800px">
    <tbody>
      <tr>
        <th style="width:200px">Event</th>
        <th style="width:60px">6A</th>
        <th style="width:60px">7A</th>
        <th style="width:60px">8A</th>
        <th style="width:60px">9A</th>
        <th style="width:60px">10A</th>
        <th style="width:60px">11A</th>
        <th style="width:60px">12P</th>
        <th style="width:60px">1P</th>
        <th style="width:60px">2P</th>
        <th style="width:60px">3P</th>
      </tr>
      <tr>
        <td>Brad Storch
        <br />9:00 AM - 12:00 PM</td>
        <td id="ea-600AM"></td>
        <td id="ea-700AM"></td>
        <td id="ea-800AM"></td>
        <td id="ea-900AM">
          <div style="position:absolute; width:240px">
            <div style="width:240px; height:15px; position:absolute; top:0px;">
            Game Van</div>
          </div>
          <div style="position:absolute; width:180px">
            <div style="width:180px; height:15px; position:absolute; top:17px;">
            Hamster Ball</div>
          </div>
        </td>
        <td id="ea-1000AM"></td>
        <td id="ea-1100AM">
          <div style="position:absolute; width:120px">
            <div style="width:120px; height:15px; position:absolute; top:34px">
            Candy Cannon</div>
          </div>
        </td>
        <td id="ea-1200PM"></td>
        <td id="ea-100PM"></td>
        <td id="ea-200PM"></td>
        <td id="ea-300PM"></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我应该尝试使用colspan和rowspan;将事件名称的rowspan设置为等于项目数，并将项目的colspan设置为等于小时数：

<div class="container">
<div class="row">
<table border="1" width="100%">
       <tbody><tr>
        <th style="width:200px">Event</th>
        <th style="width:60px">6A</th>
        <th style="width:60px">7A</th>
        <th style="width:60px">8A</th>
        <th style="width:60px">9A</th>
        <th style="width:60px">10A</th>
        <th style="width:60px">11A</th>
        <th style="width:60px">12P</th>
        <th style="width:60px">1P</th>
        <th style="width:60px">2P</th>
        <th style="width:60px">3P</th>
      </tr>
 <tr> 
          <td rowspan="3">Brad Storch
        <br>9:00 AM - 12:00 PM
   </td>
        <td id="ea-600AM"></td>
        <td id="ea-700AM"></td>
        <td id="ea-800AM"></td>
        <td id="ea-900AM" colspan="4" style="background-color:red;">
         first
        </td>
        <td id="ea-100PM"></td>
        <td id="ea-200PM"></td>
        <td id="ea-300PM"></td>
</tr>
 <tr> 

        <td id="ea-600AM"></td>
        <td id="ea-700AM"></td>
        <td id="ea-800AM"></td>
        <td id="ea-900AM" colspan="3" style="background-color:yellow;">
                               Hamster Ball
        </td>
        <td id="ea-1200PM"></td>
        <td id="ea-100PM"></td>
        <td id="ea-200PM"></td>
        <td id="ea-300PM"></td>
      </tr>
 <tr> 
        <td id="ea-600AM"></td>
        <td id="ea-700AM"></td>
        <td id="ea-800AM"></td>
   <td id="ea-900AM"></td>
        <td id="ea-1000AM"></td>
        <td id="ea-1100AM" colspan="2" style="background-color:green;">

            Candy Cannon
        </td>
        <td id="ea-100PM"></td>
        <td id="ea-200PM"></td>
        <td id="ea-300PM"></td>
      </tr> 
</tbody></table>  
</div>
</div>

演示：http://www.bootply.com/lkpipTYtVt

另请注意，Bootstrap为您提供“响应式”表格，其中包含小屏幕宽度的滚动条：http://getbootstrap.com/css/#tables-responsive

当然你也可以使用jQuery：

var cellWidth = $('#ea-600AM').innerWidth();
$('.hour4 div').css('width',cellWidth*4 + 3 + 'px').css('background-color','red');
$('.hour3 div').css('width',cellWidth*3 + 2 + 'px').css('background-color','green');
$('.hour2 div').css('width',cellWidth*2 + 1 + 'px').css('background-color','blue');

演示：http://www.bootply.com/SC93FAaHBG

调整表格大小时，如何在单元格中调整DIV大小？

1 个答案: