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

【问题标题】：How can I make a DIV resize in a cell when the table is resized?调整表格大小时，如何在单元格中调整 DIV 大小？
【发布时间】：2014-11-12 05:24:18
【问题描述】：

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

在我达到某些浏览器尺寸之前它工作正常，即 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>

【问题讨论】：

你不应该使用这么多的内联样式。您的width: 240px 至少部分导致了此问题。像这样的内联样式很难完全诊断，您应该将它们移动到 CSS 文件中。
div 的宽度必须不同，因为它们跨越时间。我将放入外部表格，我仍在开发中。
使用百分比而不是固定的像素宽度。
我相信你需要使用javascript计算tds的宽度来设置宽度
@DevlshOne 使用百分比时，绝对定位的元素会根据视口的宽度而不是表格的宽度来获取它们的宽度

标签： jquery css twitter-bootstrap-3

【解决方案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

【讨论】：