Thiết kế website giá rẻ

Question

I generated a table using django and bulma and also some custom css, and it looks like this:

    th, td {
        padding: 0.2rem 1rem;
    }
    
    th {
        font-weight: normal;
        border-top: thin dotted #ccc;
    }
    
    td {
        font-size: 0.8rem;
        font-weight: bold;
        line-height: 1.4;
        border-radius: 0.5rem;
        transition: opacity 0.3s ease;
    }
    
    td > span {
        font-size: 0.8em;
        font-weight: normal;
        display: block;
        width: 100%;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.0/css/bulma.css" rel="stylesheet"/>
<table>
  <tbody>
<tr>
  <th></th>
  <th class="has-text-left" colspan="3">
    <span class="is-size-5">
    Thursday
    </span>
    <br>
    <span class="is-size-6">
    9<sup>th</sup> May
    </span> 
  </th>
  <th class="has-text-left" colspan="3">
    <span class="is-size-5">
    Saturday
    </span>
    <br>
    <span class="is-size-6">
    11<sup>th</sup> May
    </span> 
  </th>
  <th class="has-text-left" colspan="3">
    <span class="is-size-5">
    Sunday
    </span>
    <br>
    <span class="is-size-6">
    12<sup>th</sup> May
    </span> 
  </th>
</tr>
<tr>
  <th></th>
  <th>
    <span class="is-size-6">
    room 1
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 2
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 3
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 1
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 2
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 3
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 1
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 2
    </span> 
  </th>
  <th>
    <span class="is-size-6">
    room 3
    </span> 
  </th>
</tr>
<tr class="">
  <th>7:30</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
  <td rowspan="16" style="background-color: #33d17a;">
    dumbstuff
    <span>go stupid!</span>
  </td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>7:45</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>8:00</th>
   <td rowspan=""></td>
  <td rowspan="2" style="background-color: #f9f06b;">
    stretching
    <span>lets get wiiiide</span>
  </td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>8:15</th>
  <td rowspan="4" style="background-color: #99c1f1;">
    Warmup
  </td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>8:30</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>8:45</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>9:00</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>9:15</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>9:30</th>
   <td rowspan=""></td>
  <td rowspan="10" style="background-color: #dc8add;">
    Cafe
    <span>Espresso & Cappucino</span>
  </td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>9:45</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>10:00</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
  <td rowspan="2" style="background-color: #e66100;">
    task #4
    <span>wow</span>
  </td>
</tr>
<tr class="">
  <th>10:15</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>10:30</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
<tr class="">
  <th>10:45</th>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
   <td rowspan=""></td>
</tr>
  </tbody>
</table>

What I want, is to make the columns more distinguishable using the days. So hovering over the table on a specific day I want to color of all the entries on that day.

Thiết kế website giá rẻ

Danh mục

color effect over all columns of a table