I'm creating a calendar using JavaScript, and encountered an issue with spacing out my "previous" and "next" arrow keys. Currently one sits on top of the other on the left side of the calendar, whereas I need them on either ends of the calendar. I'm only learning and I cannot see what I did wrong.

This is a piece of my code regarding the setting up of the calendar and the buttons. I'm supposed to be using jQuery too!

//Generate tabular calendar
var table = $("<table>");
var tableRow = $("<tr>");
var tableCell = $("<td>");

// Create a Button
var prevMonth = $("<button>");
prevMonth.attr("value","Previous Month").text("<<");
prevMonth.click(function() { // Function for clicking previous month button
  cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth() - 1)));
}); 
tableCell.append(prevMonth);
tableRow.append(tableCell);

let tableCellColSpan = $("<td>"); // Spacing out the nav buttons
tableCellColSpan.attr("colspan","5"); // I think the issue is here somewhere 
tableCell.append(tableCellColSpan);

// Create Button   Button Event Handler
nextMonth = $("<button>");
nextMonth.attr("value","Next Month").text(">>");
nextMonth.click(nextNav); 
function nextNav() { // Function for clicking next month button
cal.display(new Date(displayDate.getFullYear(), (displayDate.getMonth()   1)));
};
tableCell.append(nextMonth);
tableRow.append(tableCell);
table.append(tableRow); 

What the arrows look like right now

CodePudding user response：

One easy way is just give each button a class. Then have the previous button float left and the next button float right.

.prev {
  float: left;
}

.next {
  float: right;
}

table {
  width: 100%
}

<table>
  <tr>
    <td>
      <button >&lt;&lt;</button>
      <button >&gt;&gt;</button>
    </td>
  </tr>
</table>

CodePudding user response：

Your problem is more CSS than JavaScript, If you seek help with JavaScript, post the code that defines the method display() as well as a link to the documentation of the plugin you are using.

• In the <thead> add an empty <th> to the beginning and to the end of <tr>
• In the <tbody> add an empty <td> to the beginning and to the end of the first <tr>
• Add rowspan=5 to the first <td> and to the last <td> of <tbody>
• Then add a <button> to each <td rowspan=5>

The following example is a CSS sokution.

:root {
  font: 300 5vmin/1 "Segoe UI"
}

table {
  table-layout: fixed;
  width: 30rem;
  margin: 1.5rem auto;
  border: 2px ridge lightgrey
}

caption {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

th {
  width: 13%
}

th:first-of-type,
th:last-of-type {
  width: 4.5%;
  border: 0;
}

tbody tr:first-of-type td:first-of-type,
tbody tr:first-of-type td:last-of-type {
  padding: 0.5rem 0.1rem;
}

button {
  display: block;
  min-height: 4rem;
  margin: auto 0;
  padding: 0 0 0.65rem;
  border: 0;
  font: inherit;
  font-size: 2rem;
  background: none;
  cursor: pointer;
  transform: scale(2, 4);
}

th,
td {
  border: 1px solid lightgrey
}

td::before {
  content: "";
  display: block;
  width: 0;
  min-height: 2rem;
}

<main>
  <table id="calandar">
    <caption>
      <time id="month">December</time>,&nbsp;
      <time id="year">2022</time>
    </caption>
    <thead>
      <tr>
        <th>&nbsp;</th><th>SUN</th><th>MON</th>
        <th>TUE</th><th>WED</th><th>THU</th>
        <th>FRI</th><th>SAT</th><th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr><td rowspan="5"><button>