Bootstrap 4 table integrated into a calendar display at full height

Question

Bootstrap 4 table integrated into a calendar display at full height

Looking to craft a calendar with a Bootstrap 4 bordered table that spans 100% of the viewport height, featuring rows of equal width but varying heights for the days-of-the-week headers. Check it out here!

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr class="d-flex">
        <th scope="col" class="col-3">Sun</th>
        <th scope="col" class="col-3">Mon</th>
        <th scope="col" class="col-3">Tue</th>
        <th scope="col" class="col-3">Wed</th>
        <th scope="col" class="col-3">Thu</th>
        <th scope="col" class="col-3">Fri</th>
        <th scope="col" class="col-3">Sat</th>
      </tr>
    </thead>
    <tbody>
      <tr class="d-flex">
        <td class="col-3" scope="row">1</td>
        <td class="col-3">2</td>
        <td class="col-3">3</td>
        <td class="col-3">4</td>
        <td class="col-3">5</td>
        <td class="col-3">6</td>
        <td class="col-3">7</td>
      </tr>
      <tr class="d-flex">
        <td class="col-3" scope="row">8</td>
        <td class="col-3">9</td>
        <td class="col-3">10</td>
        <td class="col-3">11</td>
        <td class="col-3">12</td>
        <td class="col-3">13</td>
        <td class="col-3">14</td>
      </tr>
    </tbody>
  </table>
</div>

html,
body {
  overflow-y: hidden;
}

.table [class^='col-'] {
  flex-shrink: 1;
}

tr {
  height: calc(100vh / 3);
}

css bootstrap-4 html-table

Answer 1

Answer №1

Opting for a grid layout instead of a traditional table can streamline the process.

html, body {
        height: 100%;
        margin: 0;
        }
        .wrapper {
        border: 1px solid blue;
        height: 100%;
        padding: 10px;
        }

        .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        grid-template-rows: 50px auto auto;
        row-gap: 7px;
        }

        .grid>div {
        width: 100%;
        height: 100%;
        border: 1px solid;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

See below for an example of how to implement this:

<div class="wrapper">
        <div class="grid">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            
        </div>
    </div>

Answer 2

Opting for a grid layout instead of a traditional table can streamline the process.

html, body {
        height: 100%;
        margin: 0;
        }
        .wrapper {
        border: 1px solid blue;
        height: 100%;
        padding: 10px;
        }

        .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto;
        grid-template-rows: 50px auto auto;
        row-gap: 7px;
        }

        .grid>div {
        width: 100%;
        height: 100%;
        border: 1px solid;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

See below for an example of how to implement this:

<div class="wrapper">
        <div class="grid">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            
        </div>
    </div>

Answer 3

Answer №2

If you're wondering why tables are not recommended for layout in HTML, there is already a discussion on that topic. However, if you need to use a Bootstrap table for structuring the calendar, feel free to skip my answer.

But if you're interested in exploring how flexbox can be utilized instead, then continue reading.

Organizational Structure

Upon reviewing your source code, it's evident that your calendar has 3 main sections. I suggest organizing them as follows:

<section class="calendar">
    <section class="month-selection">
        <a href="#">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="month">DECEMBER</div>
        <a href="#">
            <i class="fas fa-arrow-right"></i>
        </a>
    </section>
    <section class="days-of-week">
        <div class="day-of-week">Sunday</div>
        ...
    </section>
    <section class="days">
        <div class="day">1</div>
        ...
    </section>
</section>

Your requirement of having the calendar occupy 100% of the viewport height is achievable through CSS/SCSS:

.calendar {
    height: 100vh;
}

To address the challenge of dynamically adjusting day heights within the days section without setting fixed heights for other sections, utilize flexbox styling:

.calendar {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;

    .days {
        height: 100%;
    }
}

By following this approach, each day box within the days section will automatically adjust its height based on available space.

Adjusting Day Heights

Ensuring each day box in the days section fills up remaining space is simple with flexbox. Just set align-items to stretch:

.days {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;

    ...
}

Visual Reference

https://i.sstatic.net/aMRR3.png

See demo here: https://jsfiddle.net/davidliang2008/uc4stzp5/107/

Answer 4

If you're wondering why tables are not recommended for layout in HTML, there is already a discussion on that topic. However, if you need to use a Bootstrap table for structuring the calendar, feel free to skip my answer.

But if you're interested in exploring how flexbox can be utilized instead, then continue reading.

Organizational Structure

Upon reviewing your source code, it's evident that your calendar has 3 main sections. I suggest organizing them as follows:

<section class="calendar">
    <section class="month-selection">
        <a href="#">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="month">DECEMBER</div>
        <a href="#">
            <i class="fas fa-arrow-right"></i>
        </a>
    </section>
    <section class="days-of-week">
        <div class="day-of-week">Sunday</div>
        ...
    </section>
    <section class="days">
        <div class="day">1</div>
        ...
    </section>
</section>

Your requirement of having the calendar occupy 100% of the viewport height is achievable through CSS/SCSS:

.calendar {
    height: 100vh;
}

To address the challenge of dynamically adjusting day heights within the days section without setting fixed heights for other sections, utilize flexbox styling:

.calendar {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;

    .days {
        height: 100%;
    }
}

By following this approach, each day box within the days section will automatically adjust its height based on available space.

Adjusting Day Heights

Ensuring each day box in the days section fills up remaining space is simple with flexbox. Just set align-items to stretch:

.days {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;

    ...
}

Visual Reference

https://i.sstatic.net/aMRR3.png

See demo here: https://jsfiddle.net/davidliang2008/uc4stzp5/107/

Bootstrap 4 table integrated into a calendar display at full height

Answer №1

Answer №2

Organizational Structure

Adjusting Day Heights

Visual Reference

Similar questions

Horizontal expanding and collapsing navigation menu

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

Issue with CSS min-height causing divs to not align properly

When attempting to override the $primary variable in Bootstrap 4, it seems that the changes are not being applied to all other overridden Bootstrap variables in the _user

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

Record the selected list item chosen by the user to optimize caching

Help with CSS and React - how to position text in front of an image

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

Conceal a DIV upon being shown in a designated container

How come the words are clear, but the background remains unseen?

Is there a way to load and play different sounds on multiple audio players based on the length of an array?

Is it possible to apply withStyles to the output of a function?

How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

Manipulating CSS rules using JavaScript/jQuery

What is the best way to arrange three identical boxes next to each other, all of the same size

Tips for controlling the width of table borders in HTML

The auto resizing feature of Angular Material TextArea is not functioning as expected when used alongside bootstrap 4

The utilization of Display Flex resulting in the enlargement of the containing div

What is preventing images from displaying in my slider within baguetteBox?

The menu bar becomes distorted when the page is zoomed out