故意在 <Span> 元素 CSS HTML 上方添加可填充空间

Question

我正在创建一个包含一些跨越元素的表格，如下所示（运行 sn-p）。

正如您在运行代码时看到的那样，在蓝色跨越元素上方（在网格 6 中），有一些空白空间将永远保留，即使我在网格 6 中添加了更多跨度，这些跨度也会跳到蓝色下方一。所以我的问题是，我怎样才能使空间可填充，即当在网格内创建新的 span 元素时，新元素可以简单地填充空白空间？

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>

我尝试在网上寻找答案，但我似乎找不到任何有效的答案，也找不到任何适合我需要的答案。我在需要时使用 HTML、CSS、PHP 和一些 JS。谢谢。

Answer 1

只需将ghost类替换为您需要的类，将finish类替换为普通类即可，而不是添加新的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>