how to add a table inside another table in bootstrap 3

Question

So, I am trying to create an event calendar in HTML. I am trying to have multiple tables inside one big table.

Here is a simple table:

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

This is how the table looks now:

And this is how I would like to do it:

Please Note, the colors are just to show what I am trying to do, I don't need a border around the day.

Also, the red rectangles are the events/titles for that day.

And so, the final table would look something like this:

but with the small table(s) inside the big table

I am using this webpage as a guide.

Full Calendar

EDIT: I just need to implement the html

EDIT and NOTE: The user with the correct answer showed that I don't need tables inside tables to create my event calendar.

Answer 1

Based on your screenshots, I made this little snippet for you to check out. The <td>'s will be squared at all times, and the events using only one line will line up below the date covering the full width of the square. This uses Bootstrap CSS / classes, but with a few rules to override stuff like padding etc.

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

Update: Added hidden horizontal content, and auto scrollable content on vertical content. Also, when mouse over the event, you will see the full description.