What methods can be used to decrease the width of a space?

I currently have this on my website:

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

But I want to organize the 3 elements to look like this:

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

<th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">DAY 1<br>Saturday, October 1</th>

I attempted to adjust the width of the fc-day-header class without success.

CSS is not my strong suit, so I'm unsure of what to do next.

Any suggestions?

EDIT: Here is the html structure:

<table>
  <thead>
    <tr>
      <th class="fc-axis fc-widget-header" style="width:18px"></th><th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01" style="width:70%;">DAY 1<br>Saturday, October 1</th>
      <th class="fc-day-header fc-widget-header fc-sun" data-date="2016-10-02">DAY 2<br>Sunday, October 2</th>
      <th class="fc-day-header fc-widget-header fc-mon" data-date="2016-10-03">DAY 3<br>Monday, October 3</th>
    </tr>
  </thead>
</table>

The html and css code were generated by full calendar and I can only modify them using javascript.

htmlcssfullcalendar

Answer №1

To create space between each cell, you can utilize the border-spacing property.

https://jsfiddle.net/3xe5mzmx/

<table>
  <thead>
    <tr>
      <th class="fc-axis fc-widget-header" style="width:18px"></th>
      <th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">DAY 1<br>Saturday, October 1st</th>
      <th class="fc-day-header fc-widget-header fc-sun" data-date="2016-10-02">DAY 2<br>Sunday, October 2nd</th>
      <th class="fc-day-header fc-widget-header fc-mon" data-date="2016-10-03">DAY 3<br>Monday, October 3rd</th>
    </tr>
  </thead>
</table>

table {
  width: 100%;
  border-spacing: 15px 10px;
  border-collapse: separate;
}
th {
  border: 1px solid black;
}

Answer №2

It is recommended to utilize 3 individual div elements with margin-left and margin-right properties for spacing.

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

Replace the default disc icon with a more detailed icon for UL lists

I am working with an unordered list and I want to use <details> to show a sublist for one of the items: <ul> <li><details> <summary>details bullet</summary> <ul> <li>detail 1</li> ...

htmlcss

Utilizing CSS to position elements on a webpage

Currently, I am immersed in a CSS and HTML project aimed at honing my skills. The main challenge I face involves positioning a Google Maps image to the right of a paragraph. Despite several attempts, I have been unable to achieve the desired layout. Can an ...

htmlcss

Using jQuery and CSS to create a temporary placeholder for images that have varying sizes

I am currently developing an innovative image gallery feature where a temporary heart image is displayed for 1 second in place of the actual images (image 1, image 2 etc). If you want to view the implementation, check out my jsfiddle below: https://jsfid ...

jquerycsstimeoutplaceholder

What are some clever ways to handle the transition of the display property?

While transitions for the display property may not work, I am exploring alternatives. I attempted using the visibility property but it didn't quite fit my needs. In my current setup, different text is displayed when hovering over an anchor tag by sett ...

javascriptjqueryhtmlcss

Connecting Angular directive to a controller

While diving into some Angular JS tutorials, I decided to apply what I learned in the Ionic framework. Unfortunately, I hit a roadblock when attempting to create a reusable HTML control because the model isn't syncing with the view as expected. Here&a ...

javascriptangularjshtml

Tips for verifying jquery datePicker dates?

Here are two input fields, startDate and tilldate, which utilize the jQuery datepicker plugin. The issue at hand is that when a user selects a date in the startDate field, only the next two days should be available for selection in the tillDate field. Fo ...

jqueryhtmljquery-uijquery-ui-datepicker

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

javascriptjqueryhtmlcss

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

htmlcssstandardsw3c

manipulating child element's innerHTML with javascript

Is there a way to change my icon from expand_more to expand_less in the code below? <li class="dropdown-bt" onclick="dropdown('content');"> <a>dropdown-content <i class="material-icons">expand_more</i></a> </ ...

javascripthtmlcss

Pass various chosen checkboxes to Java by utilizing jQuery and Ajax technology

I am struggling with sending multiple selected checkboxes from HTML to Java using jQuery/Ajax. The issue is that when I check the result in Java, instead of getting the values I selected (e.g., National, State), I get "activityRangeCBs[]". Here is the HTM ...

javajqueryhtmlajax

Incorporating z-index into weekly rows within the FullCalendar interface

I'm facing an issue where my detail dropdowns on events are being cropped by the following row. Is there a solution to adjust the z-index of each week row (.fc-row) in the monthly view, arranging them in descending order? For example, setting the z-i ...

javascriptjqueryfullcalendarz-index

Dynamic properties in JQuery

Here is the HTML DOM element I have... <input type="text" style="width: 200px;" id="input1"/> I want to make sure it stores date values. How can I specify that in the DOM element? Please provide your suggestions. Thanks! ...

javascriptjqueryhtml

CSS: Specify child element to have a full width of 100%, but appear only 50% wide

Looking at this page, it seems that the header photo is not displaying full width. #wrap { width: 990px; } #content-wrap { display: flex; } .image-header { display: block; width: 100%; } .image-header img { width: 100%; height: auto; } .cont ...

cssflexbox

Switching downlink to top link when scrolling downwards

I have a downward scrolling link on my homepage that moves the page down when clicked by the user. However, I am struggling to make it change to a "back to top" link as soon as the user scrolls 10 pixels from the top. Additionally, I am having trouble with ...

javascriptjqueryhtmlcssscroll

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Utilizing the Ace Editor (through Brace and React-Ace) is a key aspect of my project. In our implementation, we specify the editor's mode as "css" and integrate it into our webpage. While this setup functions correctly, we have observed that some of ...

javascriptcssace-editorreact-ace

What are some creative ways to incorporate images into SVG paths?

Check out my JSFiddle here. I'm attempting to position this image in the center of my arc. My initial thought was to use .attr("fill","url('somePicture')"), but so far, no luck with that approach. const width = 700; const height = 600; con ...

javascriptjqueryhtmlsvgd3.js

Send HTML table information from view to Controller action in ASP.NET Core by converting it to a list

Encountering issues with null values in the controller action method, preventing table data rows from being looped through. Model: class: public class Generation { public int Generation1Count { get; set; } public int Generation1TotalS ...

htmljqueryasp.netasp.net-mvchtml-table

Tips for transferring this text to a new line

I have come across this text that needs to be moved to a new line, This is its current appearance, Here is how I want it to look: HTML code snippet: <div id="content"> <div id="header"> <p> <img class="header-im ...

htmlcss

What orientation is best for the back arrow to take in a website written in Arabic?

Currently developing a website that supports Arabic language while considering security measures. The browser's back button will terminate the session, requiring users to utilize the on-page back button instead. When incorporating Arabic text, should ...

htmlwebarabic

Tips for locating the index of the previously selected active class

I am currently working on a slider and have made progress up to this point. However, I am facing an issue where I cannot proceed because I need to identify the index of the item from which I removed the last active class before the click event occurs. My ...

javascriptcsssliderclickstyles