[SOLVED] How to make gradient column in a table?

How to make gradient column in a table?

I would like to have one column in a table have a blue gradient background from top to bottom. As in extending over multiple rows, ten precisely. Essentially like this one but for a column instead of row:

https://codepen.io/warkentien2/pen/JxxXvr

<table>
<tr> <td></td> <td class = "gradient_column"></td> <td></td> </tr>
<tr> <td></td> <td class = "gradient_column"></td> <td></td> </tr>
<tr> <td></td> <td class = "gradient_column"></td> <td></td> </tr>
</table>

Solution

Well, if you are using a table you can use the colgroup and col tags to describe the columns, and you can apply the styling there to affect the whole column.

To make it continuous you should collapse the borders, which might limit other styling options you might want on the table (or force you to be a little more creative to achieve them)

table {
  border-spacing: 5px;
  border-collapse: collapse;
}

col.gradient {
  background: linear-gradient(red, gold);
  border: 1px solid black;
}

td {
  padding: 1em;
}

<table>
  <colgroup>
    <col />
    <col />
    <col class="gradient" />
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
      <td>15</td>
    </tr>
    <tr>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
      <td>25</td>
    </tr>
  </tbody>
</table>