Question 412137 in Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

3

Answers


  1. 0

    You can apply a rowspan on the column you want to have a gradient of, having the value equal to the number of rows and then have a table inside this td with as many rows as the outer table and apply your gradient styling on this inner table:

    table.gradient {
    background-image: linear-gradient(red, yellow);
}
    <table>
    <tr>
        <td>data</td>
        <td>data</td>
        <td rowspan="6">
            <table class="gradient">
            <tbody>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
                <tr><td>data</td></tr>
            </tbody>
            </table>
        </td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    Since you cannot apply a background to a column and since you need one uninterrupted gradient over all cells in that column, you could apply the gradient background to the whole table and define the background for all cells except the the desired ones as white (or any other color you want):

    In the example below I cholse the last column for the gradient background, but it could be done with any one or also several ones using nth-child or nth-of-type in the selectors. Additionally I applied transparent borders to those "gradient cells" since I used grey borders for the whole table.

    table {
  background-image: linear-gradient(green, yellow);
  border-collapse: collapse;
}

td {
  padding: 4px;
  border: 1px solid #ddd;
}

td:not(:last-of-type) {
  background: #fff;
}
td:last-of-type {
  border: 1px solid transparent;
}
    <table>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search