Creating intentional blank space before the <Span> element using CSS in HTML

Currently working on a table with some spanned elements for customization. One issue I am facing is the persistent blank space above the blue spanned element in grid 6. Even when adding more spans to grid 6, they just jump below the blue one. How can I make this space fillable so that new span elements created inside the grid seamlessly 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 searched online for solutions without success. I work with HTML, CSS, PHP, and a hint of JS as needed. Any help would be greatly appreciated. Thank you.

htmlcss

Answer №1

Simply swap out the ghost class for the required class and replace the finish class with a regular class instead of adding a new span element

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying SQL data in a table using PHP

I've encountered a dilemma where the category name is being outputted as the same for both offered and wanted categories in PHP. This issue arises when trying to display categoryName differently for each type of category in a table. Despite attempting ...

phphtmlmysqlhtml-table

Having trouble with custom padding for b-sidebar in VueJS?

I am struggling with adding padding to the sidebar using bootstrap-vue. When I attempt to add padding in the browser devtools, it works perfectly fine. However, when trying to implement the same code, it doesn't reflect on the actual webpage. I tried ...

cssvue.jspaddingsidebar

Choose the grandparent of an element's parent

Is there a way to select the grandparent element of a child in Javascript without having to chain the .parentElement method twice? Specifically, I am looking for a method that can substitute .parentElement.parentElement when selecting the desired element, ...

javascripthtmlcss

What is the correct way to utilize the submit() function within this specific form?

I have a small registration form that requires validation before submission. In order to achieve this, I've developed a JavaScript function as shown below: var name = document.getElementById('name').value; var company = document.getElem ...

javascriptjqueryhtmlformsvalidation

css determining the width through calculation

I am facing a challenge with a math problem. My content box is 700 pixels wide, and my hentry (inside content) is 100% wide with padding of 10 pixels. This causes the hentry to be wider than the content, resulting in an overflow... Does anyone have a so ...

csswordpress

Constructing a string with specific formatting inside a For loop

I need assistance with formatting a string within my webform. Currently, I have a function that uses a for loop to output each item in my cart. However, I am struggling to include tab spaces and newline characters for better readability. Here is the code s ...

c#asp.netcss

Create a pagination system in CodeIgniter for displaying data

Having trouble implementing paging in the search functionality of my result table. I want to display just 10 rows but can't get it to work properly. I tried reading about Pagination on https://codeigniter.com/, but I'm still struggling to unders ...

phphtmlcodeigniterpagination

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

javascripthtmlvue.js

What are some tips for using CSS display grid to effectively showcase my HTML content?

Visit my About Me page with custom menu styling Any tips on aligning the body with the grid function to achieve this particular design? ...

htmlcsscss-grid

"Patience is a virtue: Tips for waiting until a webpage is completely loaded using

I attempted to use a special class name that only shows up after the page has completely loaded, but for some reason it appears before the content is visible on screen. try: WebDriverWait(self.browser, 20).until(EC.element_to_be_clickable((By.CLASS_NA ...

pythonseleniumhtml

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

javascriptjqueryhtmlcssowl-carousel

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am currently working with the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans ...

javascripthtmljquerycssreactjs

CSS following a clicked event

http://codepen.io/anon/pen/GqmEAq My goal is to make the 'x' button clicked (the 'x' is created after clicking the plus sign on the menu) and then bring the dropdown back up. I have attempted: a:after:checked ~ .submenu{ max-height ...

css

Manipulating a cloned object using jQuery

var clonedForm = $('form').clone(); //clonedForm.find('input[type="hidden"]').remove(); clonedForm.find('select').each(function(){ $($(this).val()).insertAfter($(this)); $(this).remove(); }); Atte ...

jqueryhtmldom

Tips for achieving fluid and seamless page scrolling on a website

Looking to add smooth scrolling to my website but unsure of the best method - whether to override normal mouse scrolling or pursue another approach. I'm aiming for a similar effect as seen here. Give it a try and scroll through the page. ...

phpjquerycsssmooth-scrolling

Classes aren't displaying properly for elements inside

Is there a way to display the header only in a small size using the col-sm-* class of the div inside a container? It seems like the col-sm-* class is not working correctly and not floating them properly. <link href="https://maxcdn.bootstrapcdn.com/b ...

htmlcssbootstrap-4

The select dropdown default choice is not appearing as expected

My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...

htmlcssangular

Layering elements using CSS and HTML to create a background effect

I have created a menu using div elements and I want one of the menu items to have a background that extends behind it to the body. Here is the structure: body { background-image: url(path/body.png); } #menu { overflow: hidden; width: 400px; ba ...

htmlcss

Pressing the button results in no action

I am currently developing a program that randomly selects 5 words from a database and inserts them into an array. Although the page loads correctly initially, nothing happens when the button is clicked. None of the alerts are triggered, suggesting that the ...

javascriptphphtmlxml

Transform the CSS to a Mat-Form-Field containing a search box within it

I am currently working with Angular, Angular Material, and SCSS for my project. Here is the front-end code snippet that I am using: <mat-form-field class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px; ...

cssangularangular-material