Table & Pagination Styling

Table styling

The dashboard page (dashboard.html) currently has a simple table with some sample products:

Update the styles.css to style the table elements:

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

th,
td {
    text-align: left;
    padding: 0.75rem;
    border: 1px solid #dde;
}

th {
    background-color: #2d877d;
    color: #fff;
    font-weight: bold;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

• width: 100%: Set the width of the table to be 100% of the available container.
• border-collapse: collapse: This will determine if the cells in the table have their own separate border or shared with others:

• tr:nth-child(even): This is a pseudo-class to match any element that is a _n_th child of the parent (tr). It can contain a number such as 2 to select the second child element, or a keyword such as odd or even to alternate. Our even example will select row two, four, six etc.

Button styling

Add the following classes to each button:

<!-- dashboard.html -->
<tbody>
  <tr>
    <td>Blue t-shirt</td>
    <td>$20.95</td>
    <td>
      <button class="edit-btn">Edit</button>
      <button class="delete-btn">Delete</button>
    </td>
  </tr>
  <tr>
    <td>Red t-shirt</td>
    <td>$20.95</td>
    <td>
      <button class="edit-btn">Edit</button>
      <button class="delete-btn">Delete</button>
    </td>
  </tr>
</tbody>

And apply the following styles:

/* styles.css */
button {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border: none;
    border-radius: 3px;
}

button:hover {
    opacity: 0.8;
}

button:active {
    transform: scale(0.98);
}

.edit-btn {
    background-color: #dba503;
    color: #fff;
}

.delete-btn {
    background-color: #e4293b;
    color: #fff;
}

• button:hover: This will apply the opacity property when the mouse hovers over the buttons. Setting the opacity to be a value of 0.8. With a range available from 0-1, lower values are more transparent.
• button:active: The active psuedo class is applied when the user activates the element. A button click will activate the transform.

Pagination styling

Update the pagination div to include the id and class, along with adding two sample buttons. Apply this to both HTML pages:

<!-- index.html -->
  <div id="pagination" class="pagination">
    <button class="active">1</button>
    <button>2</button>
  </div>
</main>

<!-- dashboard.html -->

<!-- pagination start -->
<div id="pagination" class="pagination">
  <button class="active">1</button>
  <button>2</button>
</div>
<!-- pagination end -->

<div>
  <label for="edit-name">Name:</label>
  <input id="edit-name" type="text" />
  <label for="edit-price">Price:</label>
  <input id="edit-price" type="number" step=".01" />
  <div>
    <button>Save</button>
    <button>Cancel</button>
  </div>
</div>
</main>

Extend the styles.css file to style the pagination buttons:

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.pagination button {
    margin: 0.2rem;
    padding: 0.5rem 1rem;
    border: 1px solid #dde;
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pagination button.active {
    background-color: #2d877d;
    color: #fff;
}

.pagination button:hover {
    background-color: #f1f1f1;
    color: inherit; /* changes white text now we have light bg */
}

The active psuedo class is currently applied to one button. Later when these are generated using JavaScript the class will change to the selected page.