0

我有一些嵌套表。

我有一个带有两个 tds 的 tr,一个是 14%,另一个是 86%。

较长的 td 包含另一个表。现在子表的宽度很长。

我想要做的就是将子表放在较长的 td 中,这样它就不会溢出,而是滚动。

table,td,th{
  border: 1px solid gray;
}
<table class="display" id="dt3">
  <thead>
    <tr class="table_header">
      <th style="width:14%">&nbsp;</th>
      <th class="schedule_view" style="width:86%;">Consultant schedule</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd gradeA">
      <td>
        John Dolan
      </td>
      <td class="schedule_view">
        <div style="overflow:hidden;">

          <table class="display">

            <tr>
              <th>&nbsp;</th>
              <th>25-May
                <br />2015</th>
              <th>01-Jun
                <br />2015</th>
              <th>08-Jun
                <br />2015</th>
              <th>15-Jun
                <br />2015</th>
              <th>22-Jun
                <br />2015</th>
              <th>29-Jun
                <br />2015</th>
              <th>06-Jul
                <br />2015</th>
              <th>13-Jul
                <br />2015</th>
              <th>20-Jul
                <br />2015</th>
              <th>27-Jul
                <br />2015</th>
              <th>03-Aug
                <br />2015</th>
              <th>10-Aug
                <br />2015</th>
              <th>17-Aug
                <br />2015</th>
              <th>24-Aug
                <br />2015</th>
              <th>31-Aug
                <br />2015</th>
              <th>07-Sep
                <br />2015</th>
              <th>14-Sep
                <br />2015</th>
              <th>21-Sep
                <br />2015</th>
              <th>28-Sep
                <br />2015</th>
              <th>05-Oct
                <br />2015</th>
              <th>12-Oct
                <br />2015</th>
              <th>19-Oct
                <br />2015</th>
              <th>26-Oct
                <br />2015</th>
              <th>02-Nov
                <br />2015</th>
              <th>09-Nov
                <br />2015</th>
              <th>16-Nov
                <br />2015</th>
              <th>23-Nov
                <br />2015</th>
              <th>30-Nov
                <br />2015</th>
            </tr>
            <tr style="background-color: #FFFFFF;">
              <td>BOC</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>

            </tr>

          </table>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr style="display:none;">
      <th></th>
      <th class="schedule_view" style="display:none;"></th>
    </tr>
  </tfoot>
</table>

在此处输入图像描述

4

1 回答 1

0

您应该提供一些代码。据我了解,您可以声明td包含额外内容table

td {
overflow-y: scroll;
}

td {
  overflow-y: scroll;
}
td,
th {
  border: 1px solid gray;
}
table {
  border: 1px solid blue;
}
<table class="display" id="dt3">
  <thead>
    <tr class="table_header">
      <th style="width:14%">&nbsp;</th>
      <th class="schedule_view" style="width:86%;">Consultant schedule</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd gradeA">
      <td>
        John Dolan
      </td>
      <td class="schedule_view">
        <div style="overflow:hidden;">

          <table class="display">

            <tr>
              <th>&nbsp;</th>
              <th>25-May
                <br />2015</th>
              <th>01-Jun
                <br />2015</th>
              <th>08-Jun
                <br />2015</th>
              <th>15-Jun
                <br />2015</th>
              <th>22-Jun
                <br />2015</th>
              <th>29-Jun
                <br />2015</th>
              <th>06-Jul
                <br />2015</th>
              <th>13-Jul
                <br />2015</th>
              <th>20-Jul
                <br />2015</th>
              <th>27-Jul
                <br />2015</th>
              <th>03-Aug
                <br />2015</th>
              <th>10-Aug
                <br />2015</th>
              <th>17-Aug
                <br />2015</th>
              <th>24-Aug
                <br />2015</th>
              <th>31-Aug
                <br />2015</th>
              <th>07-Sep
                <br />2015</th>
              <th>14-Sep
                <br />2015</th>
              <th>21-Sep
                <br />2015</th>
              <th>28-Sep
                <br />2015</th>
              <th>05-Oct
                <br />2015</th>
              <th>12-Oct
                <br />2015</th>
              <th>19-Oct
                <br />2015</th>
              <th>26-Oct
                <br />2015</th>
              <th>02-Nov
                <br />2015</th>
              <th>09-Nov
                <br />2015</th>
              <th>16-Nov
                <br />2015</th>
              <th>23-Nov
                <br />2015</th>
              <th>30-Nov
                <br />2015</th>
            </tr>
            <tr style="background-color: #FFFFFF;">
              <td>BOC</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>5</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>100%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>
              <td>0%</td>

            </tr>

          </table>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr style="display:none;">
      <th></th>
      <th class="schedule_view" style="display:none;"></th>
    </tr>
  </tfoot>
</table>

于 2015-05-28T15:47:04.403 回答