Purposely Add Fillable Space Above <Span> Element CSS HTML

Question

I am creating a table with some spanned elements, like the one shown below(run snippet).

As you see when running the code, above the blue spanned element(in grid 6), there is some blank space which will stay forever, and even if i added more spans to grid 6, the spans would jump below the blue one. So my question is, how could i make the space fillable, i.e. when a new span element is created inside the grid, the new element can simply fill up the blank space?

table { width: 100%; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); font-family: 'Ubuntu'; /*border-collapse: collapse;*/ border-spacing: 0; background-color: #333333; }

th, td { border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; }

th { text-transform: uppercase; font-size:10px; font-weight:700; padding: 10px 0; color: rgba(255,255,255,0.5); background-color: #292929; letter-spacing: 1px; }

td { width: 14.285%; transition: all 0.3s; font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 400; font-size: 14px; padding: 1.5% 1.5% 5%; vertical-align: initial; padding: 1.5% 0 ; height: 75px; }

.day:hover { background-color: rgba(0,0,0,0.1); cursor:pointer; }

span.number { margin-left: 10% }

span.event { height: 20px; background-color: rgba(0,0,0,.3); display: block; margin: 5px 10%; border-radius: 2px; background-color: #91c33b; }

span.event-multiday { margin: 5px -2px; border-radius: 0; }
span.event-multiday-start { margin-right: -4px;  }
span.event-multiday-finish { margin-left: -4px;  }

span.event-ghost { background-color:transparent; }

<table>
  <tr>
    <th class="day-name">Wed</th>
    <th class="day-name">Thu</th>
    <th class="day-name">Fri</th>
    <th class="day-name">Sat</th>
  </tr>
  <tr>
    <td class="day"><span class="number">3</span><span class="event event-multiday-start"></span></td>
    <td class="day"><span class="number">4</span><span class="event event-multiday"></span><span class="event event-multiday-start eventclass" style="background-color:#5a9ab2;"></span><span class="event"></td>
    <td class="day"><span class="number">5</span><span class="event event-multiday-finish"></span><span class="event event-multiday eventclass" style="background-color:#5a9ab2;"></span></td>
    <td class="day"><span class="number">6</span><span class="event event-ghost"></span><span class="event event-multiday-finish eventclass" style="background-color:#5a9ab2;"></span></td>
  </tr>

I've tried finding answers online, but i just can't seem to find any answers that work well, nor any that fit my needs. I am using HTML, CSS, PHP, and a bit of JS when needed. Thank you.

Answer 1

Just replace the ghost class with the class that you need and replace the finish class with a normal class instead of adding a new span

const currentEvt = document.querySelector("td.day-5 .event-1");
currentEvt.classList.replace("event-multiday-finish", "event-multiday")
const ghost = document.querySelector("td.day-6 .event-1");
ghost.classList.replace("event-ghost", "event-multiday-finish");

table { width: 100%; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px 
rgba(0,0,0,0.1); font-family: 'Ubuntu'; /*border-collapse: collapse;*/ border-spacing: 
0; background-color: #333333; }

th, td { border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; }

th { text-transform: uppercase; font-size:10px; font-weight:700; padding: 10px 0; 
color: rgba(255,255,255,0.5); background-color: #292929; letter-spacing: 1px; }

td { width: 14.285%; transition: all 0.3s; font-size: 14px; color: 
rgba(255,255,255,0.6); font-weight: 400; font-size: 14px; padding: 1.5% 1.5% 5%; 
vertical-align: initial; padding: 1.5% 0 ; height: 75px; }

.day:hover { background-color: rgba(0,0,0,0.1); cursor:pointer; }

span.number { margin-left: 10% }

span.event { height: 20px; background-color: rgba(0,0,0,.3); display: block; margin: 
5px 10%; border-radius: 2px; background-color: #91c33b; }

span.event-multiday { margin: 5px -2px; border-radius: 0; }
span.event-multiday-start { margin-right: -4px;  }
span.event-multiday-finish { margin-left: -4px;  }

span.event-ghost { background-color:transparent; }

<table>
    <tr>
        <th class="day-name">Wed</th>
        <th class="day-name">Thu</th>
        <th class="day-name">Fri</th>
        <th class="day-name">Sat</th>
    </tr>
    <tr>
        <td class="day day-3">
            <span class="number">3</span>
            <span class="event event-multiday-start event-1"></span>
        </td>
        <td class="day day-4">
            <span class="number">4</span>
            <span class="event event-multiday event-1"></span>
            <span class="event event-multiday-start eventclass event-2" style="background-color:#5a9ab2;"></span>
            <span class="event event-3"></td>
        <td class="day day-5">
            <span class="number">5</span>
            <span class="event event-multiday-finish event-1"></span>
            <span class="event event-multiday eventclass event-2" style="background-color:#5a9ab2;"></span></td>
        <td class="day day-6">
            <span class="number">6</span>
            <span class="event event-ghost event-1"></span>
            <span class="event event-multiday-finish eventclass event-2" style="background-color:#5a9ab2;"></span>
        </td>
    </tr>
</table>