引导表溢出问题

时间:2018-07-16 09:37:14

标签: css html-table bootstrap-4

我在手风琴中有一个引导表,问题在于该表的宽度超过了div,我想使表变小,并防止溢出。

如果我添加“表响应”类,则该类仅可滚动,但不能更改单元格的大小。

.timetable-cell {
    width: 1rem ;
}
.reserved-cell {
    width: 1rem ;
    background-color: #cd5c5c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card-body">
  <table id="BENG_2_Fall_timetable" border="1" class="table">
    <tr></tr>
    <tr>
      <th></th>
      <th colspan="2&quot;">08:00</th>
      <th colspan="2">09:00</th>
      <th colspan="2">10:00</th>
      <th colspan="2">11:00</th>
      <th colspan="2">12:00</th>
      <th colspan="2">13:00</th>
      <th colspan="2">14:00</th>
      <th colspan="2">15:00</th>
      <th colspan="2">16:00</th>
      <th colspan="2">17:00</th>
      <th colspan="2">18:00</th>
      <th colspan="2">19:00</th>
      <th colspan="2">20:00</th>
    </tr>
    <tr>
      <th id="BENG_2_Fall_timetable_day_MON">MON</th>
      <td id="BENG_2_Fall_timetable_1_1" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_2" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_3" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_4" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_5" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_6" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_7" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_8" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_9" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_10" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_11" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_12" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_13" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_14" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_15" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_16" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_17" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_18" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_19" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_20" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_21" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_22" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_23" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_24" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_25" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_1_26" class="timetable-cell" style="width: 1rem"> </td>
    </tr>
    <tr>
      <th id="BENG_2_Fall_timetable_day_TUE">TUE</th>
      <td id="BENG_2_Fall_timetable_2_1" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_2" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_3" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_4" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_5" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_6" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_7" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_8" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_9" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_10" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_11" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_12" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_13" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_14" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_15" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_16" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_17" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_18" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_19" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_20" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_21" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_22" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_23" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_24" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_25" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_2_26" class="timetable-cell" style="width: 1rem"> </td>
    </tr>
    <tr>
      <th id="BENG_2_Fall_timetable_day_WED">WED</th>
      <td id="BENG_2_Fall_timetable_3_1" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_2" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_3" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_4" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_5" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_6" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_7" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_8" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_9" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_10" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_11" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_12" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_13" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_14" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_15" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_16" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_17" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_18" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_19" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_20" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_21" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_22" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_23" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_24" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_25" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_3_26" class="timetable-cell" style="width: 1rem"> </td>
    </tr>
    <tr>
      <th id="BENG_2_Fall_timetable_day_THU">THU</th>
      <td id="BENG_2_Fall_timetable_4_1" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_2" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_3" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_4" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_5" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_6" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_7" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_8" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_9" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_10" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_11" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_12" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_13" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_14" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_15" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_16" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_17" class="reserved-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_18" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_19" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_20" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_21" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_22" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_23" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_24" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_25" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_4_26" class="timetable-cell" style="width: 1rem"> </td>
    </tr>
    <tr>
      <th id="BENG_2_Fall_timetable_day_FRI">FRI</th>
      <td id="BENG_2_Fall_timetable_5_1" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_2" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_3" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_4" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_5" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_6" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_7" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_8" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_9" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_10" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_11" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_12" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_13" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_14" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_15" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_16" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_17" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_18" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_19" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_20" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_21" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_22" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_23" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_24" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_25" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_5_26" class="timetable-cell" style="width: 1rem"> </td>
    </tr>
    <tr>
      <th id="BENG_2_Fall_timetable_day_SAT">SAT</th>
      <td id="BENG_2_Fall_timetable_6_1" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_2" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_3" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_4" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_5" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_6" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_7" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_8" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_9" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_10" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_11" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_12" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_13" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_14" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_15" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_16" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_17" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_18" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_19" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_20" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_21" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_22" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_23" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_24" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_25" class="timetable-cell" style="width: 1rem"> </td>
      <td id="BENG_2_Fall_timetable_6_26" class="timetable-cell" style="width: 1rem"> </td>
    </tr>
  </table>
</div>

我希望表保留在其父表中而不会溢出。

0 个答案:

没有答案