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

Question

I have an hourly timeline type view that is a table, then I have activities the stretch along the timeline for as long as the activities are.

It works fine until I hit certain browser sizes, namely iPad in witch the divs will start to spill over into other hours. They should stop at the red line since the event is only til 12pm.

Question is, how can I make the divs resize to stay within their boundaries?

I am using Bootstrap 3.2 and Metronic template

Thanks!

Here is the code.

<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

I should try to use colspan and rowspan ; set the rowspan of the event name equal to the number of items and set the colspan of the items equal to the number of hours:

<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>

demo: http://www.bootply.com/lkpipTYtVt

Also notice that Bootstrap provide you 'responsive' table, which got scrollbars for small screen widths: http://getbootstrap.com/css/#tables-responsive

Of course you can also use 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'); 

demo: http://www.bootply.com/SC93FAaHBG