Search code examples
htmlcss

CSS - How to place content between my column borders

I think this question is better suited for a "show" don't tell. So I'll start off with a screenshot of my current design:

enter image description here

I want the times to show between the columns header, is that even possible? I wish do to it statically right now, I have 16 columns. Technically I have 17, but I want the time to appear from the first column line to the last, so like this:

enter image description here

And if there is a way to make the column borders extend to the top a bit, that would be nice too!

Here's my code in JSFiddle: https://jsfiddle.net/zqu3n1jw/1/

Here's the code:

<template>
    <div class="calendar">
        <!-- Header -->
      <div class="calendar__header">
            <div class="calendar__header--time">6:00</div>
            <div class="calendar__header--time">7:00</div>
            <div class="calendar__header--time">8:00</div>
            <div class="calendar__header--time">9:00</div>
            <div class="calendar__header--time">10:00</div>
            <div class="calendar__header--time">11:00</div>
            <div class="calendar__header--time">12:00</div>
            <div class="calendar__header--time">13:00</div>
            <div class="calendar__header--time">14:00</div>
            <div class="calendar__header--time">15:00</div>
            <div class="calendar__header--time">16:00</div>
            <div class="calendar__header--time">17:00</div>
            <div class="calendar__header--time">18:00</div>
            <div class="calendar__header--time">19:00</div>
            <div class="calendar__header--time">20:00</div>
            <div class="calendar__header--time">21:00</div>
            <div class="calendar__header--time">22:00</div>
        </div>
        <!-- Body -->
        <div class="calendar__body">
            <div class="calendar__row" v-for="(activity, index) in activities" :key="index">
                <div class="calendar__cell">{{ activity.name }}</div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            </div>
        </div>
        <!-- Footer -->
        <div class="calendar__footer">
            <div class="calendar__cell"><span class="calendar__cell--value">TOTAL</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
        </div>
    </div>
</template>
<style scoped lang="scss" src="./Calendar.scss"></style>
<script lang="ts" src="./Calendar.ts"></script>
Solution

  • Use text-align:center; and translateX(-50%);.

    Set .calendar__header--time same width as .calendar__cell.

    Add flex-shrink: 0; on .calendar__header--time:first-child and .calendar__cell:first-child to prevent first col become smaller than 16%.

    .calendar__header--time {
  padding-top: 10px;
  color: lightblue;
  width: 6%;
  transform: translateX(-50%);
  text-align: center;
}

.calendar__header--time:first-child {
  width: 16%;
  flex-shrink: 0;
}

.calendar__cell:first-child {
  width: 16%;
  flex-shrink: 0;
  justify-content: left;
  padding: 0;
}


    const {
  createApp
} = Vue;

createApp({
  data() {
    return {
      activities: [{
          name: "Planning"
        },
        {
          name: "Replenishment"
        },
        {
          name: "Picking"
        },
        {
          name: "Packing"
        },
        {
          name: "Shipping"
        },
        {
          name: "Problem solving"
        }
      ]
    };
  }
}).mount('#app');
    .calendar {
  min-height: 100%;
  max-width: 100%;
}

.calendar__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px dashed gray;
}

.calendar__header {
  display: flex;
}

.calendar__header--time {
  padding-top: 10px;
  color: lightblue;
  width: 6%;
  transform: translateX(50%);
  text-align: center;
}

.calendar__cell {
  box-sizing: border-box;
  flex-grow: 0;
  padding: 8px 12px;
  overflow: hidden;
  list-style: none;
  width: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-right: 1px solid gray;
}

.calendar__footer {
  display: flex;
  background-color: #E8E9EB;
}

.calendar__header--time:first-child {
  width: 16%;
  flex-shrink: 0;
}

.calendar__cell:first-child {
  width: 16%;
  flex-shrink: 0;
  justify-content: left;
  padding: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>
<div id="app" class="calendar">
  <!-- Header -->
  <div class="calendar__header">
    <div class="calendar__header--time">6:00</div>
    <div class="calendar__header--time">7:00</div>
    <div class="calendar__header--time">8:00</div>
    <div class="calendar__header--time">9:00</div>
    <div class="calendar__header--time">10:00</div>
    <div class="calendar__header--time">11:00</div>
    <div class="calendar__header--time">12:00</div>
    <div class="calendar__header--time">13:00</div>
    <div class="calendar__header--time">14:00</div>
    <div class="calendar__header--time">15:00</div>
    <div class="calendar__header--time">16:00</div>
    <div class="calendar__header--time">17:00</div>
    <div class="calendar__header--time">18:00</div>
    <div class="calendar__header--time">19:00</div>
    <div class="calendar__header--time">20:00</div>
    <div class="calendar__header--time">21:00</div>
    <div class="calendar__header--time">22:00</div>
  </div>
  <!-- Body -->
  <div class="calendar__body">
    <div class="calendar__row" v-for="(activity, index) in activities" :key="index">
      <div class="calendar__cell">{{ activity.name }}</div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
      <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
    </div>
  </div>
  <!-- Footer -->
  <div class="calendar__footer">
    <!-- Footer content here -->
  </div>
</div>