How to add Table with header cells in the top row and first column using Buefy table

Question

I would like to make a table using buefy that looks like this one.

Answer 1

I think that the table design component cannot be seen on the buefys docs website. There are three things that you can do.

First, you can override the css style of the buefy table component, Second, you can add a body and a header inside the buefy table components default slot, or you can just create it your own.

table, td, th {
  border: 1px solid black;
}

th {
  background-color: #ccc;
}

table {
  width: 100%;
  border-collapse: collapse;
}

<table>
  <thead>
    <td></td>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thrusday</th>
    <th>Friday</th>
  </thead>
  <tbody>
    <tr>
      <th>9:00 - 11:00</th>
      <td>Closed</td>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
      <td>Closed</td>
    </tr>
    <tr>
      <th>11:00 - 13:00</th>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
      <td>Closed</td>
      <td>Closed</td>
    </tr>
    <tr>
      <th>13:00 - 15:00</th>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
      <td>Closed</td>
      <td>Closed</td>
    </tr>
    <tr>
      <th>15:00 - 17:00</th>
      <td>Closed</td>
      <td>Closed</td>
      <td>Closed</td>
      <td>Open</td>
      <td>Open</td>
    </tr>
  <tbody>
</table>