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

by

0👍

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>

Leave a comment