如何在bootstrap 3中的另一个表中添加一个表

Question

所以，我正在尝试用HTML创建一个事件日历。我想在一个大桌子里面放多个桌子。

这是一个简单的表格：

<table class="table table-bordered">
          <thead>
              <tr>
                  <th>Sun</th>
                  <th>Mon</th>
                  <th>Tue</th>
                  <th>Wed</th>
                  <th>Thu</th>
                  <th>Fri</th>
                  <th>Sat</th>
              </tr>
          </thead>
          <tbody>

              <tr>

                  <td class=" td-top-text"></td>
                  <td class=" td-top-text"></td>
                  <td class=" td-top-text"></td>
                  <td class=" td-top-text"></td>
                  <td class=" td-top-text">1</td>
                  <td class=" td-top-text">2</td>
                  <td class=" td-top-text">3</td>
              </tr>

              <tr>
                  <td class="td-top-text">4</td>
                  <td class="td-top-text">5</td>
                  <td class="td-top-text">6</td>
                  <td class="td-top-text">7</td>
                  <td class="td-top-text">8</td>
                  <td class="td-top-text">9</td>
                  <td class="td-top-text">10</td>
              </tr>
          </tbody>
      </table>

这就是现在的表格：

这就是我想要的方式：

请注意，颜色只是为了显示我想要做的事情，我不需要在一天内使用边框。

此外，red rectangles是当天的事件/标题。

所以，决赛桌看起来像这样：

但是大桌子里面有小桌子

我正在使用此网页作为指南。

Full Calendar

编辑：我只需要实施html

编辑并注意： 具有正确答案的用户表明我不需要表格内的表来创建我的事件日历。

Answer 1

根据您的屏幕截图，我制作了这个小片段供您查看。 <td>将始终被平方，仅使用一条线的事件将排列在覆盖广场整个宽度的日期之下。这使用Bootstrap CSS /类，但有一些规则来覆盖填充等内容。

.inside-date, .td-top-text {
    text-align: right;
}
.inside-event {
    text-align: left;
}
.inside-event.btn {
    text-align: left;
    width: 100%;
    padding: 0px;
    line-height: 1.2em;
}
td.td-top-text {
    width:14.28571428571429%; /* 100% divided by 7 */
    position:relative;
}
td.td-top-text:before {
    content:'';
    display:block;
    margin-top:100%;
    position: relative;
}
td.td-top-text .inside {
    position:absolute;
    top:2px;
    bottom:2px;
    left:2px;
    right:2px;
    overflow-y: auto;
    overflow-x: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class=" td-top-text"></td>
            <td class=" td-top-text"></td>
            <td class=" td-top-text"></td>
            <td class=" td-top-text"></td>
            <td class=" td-top-text">
                <div class="inside">
                    <div class="inside-date">1</div>
                    <div class="inside-event btn btn-primary" title="Event text 1(shown on hover)">Event text 1</div>
                    <div class="inside-event btn btn-warning" title="Event text 2(shown on hover)">Event text 2</div>
                    <div class="inside-event btn btn-success" title="Event text 3(shown on hover)">Event text 3</div>
                    <div class="inside-event btn btn-primary" title="Event text 4(shown on hover)">Event text 4</div>
                    <div class="inside-event btn btn-warning" title="Event text 5(shown on hover)">Event text 5</div>
                    <div class="inside-event btn btn-success" title="Event text 6(shown on hover)">Event text 6</div>
                    <div class="inside-event btn btn-primary" title="Event text 7(shown on hover)">Event text 7</div>
                    <div class="inside-event btn btn-warning" title="Event text 8(shown on hover)">Event text 8</div>
                    <div class="inside-event btn btn-success" title="Event text 9(shown on hover)">Event text 9</div>
                </div>
            </td>
            <td class=" td-top-text">
              <div class="inside">
                <div class="inside-date">2</div>
                <div class="inside-event btn btn-primary" title="Text fits(shown on hover)">Text fits</div>
                <div class="inside-event btn btn-warning" title="Long event text that absolutely does not fit(shown on hover)">Long event text that absolutely does not fit</div>
                </div>
            </td>
            <td class=" td-top-text">
                <div class="inside">3</div>
            </td>
        </tr>
        <tr>
            <td class="td-top-text">
                <div class="inside">4</div>
            </td>
            <td class="td-top-text">
                <div class="inside">5</div>
            </td>
            <td class="td-top-text">
                <div class="inside">6</div>
            </td>
            <td class="td-top-text">
                <div class="inside">7</div>
            </td>
            <td class="td-top-text">
                <div class="inside">8</div>
            </td>
            <td class="td-top-text">
                <div class="inside">9</div>
            </td>
            <td class="td-top-text">
                <div class="inside">10</div>
            </td>
        </tr>
    </tbody>
</table>

更新：在垂直内容上添加隐藏的水平内容和自动滚动内容。此外，当鼠标悬停在事件上时，您将看到完整的描述。