CODEWITHSUNDEEP
htmlcss
Molfar
Molfar

Reputation: 1501

Style html table with column gradient

How can I style html table to desired result show on the picture. The requirement is to make gradient dynamic, independent from number of rows. Looking for non javascript, crossbrowser css solution with minimum of hacks.

This project is built with Tailwindcss 2. So it would be nice to have styled with it. I've created a simple sandbox https://codesandbox.io/s/intelligent-heyrovsky-nhkg8 with layout.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Desired result

Upvotes: 1

Views: 1044

Answers (3)

Razvan Constantin
Razvan Constantin

Reputation: 30

Add to TD number class like

 <td class="number1'> 25.99 </td>

After i dont know if you can style this without css or bootstrap. But i will give you the font, and a little bit from css

.number1{ 
position: relative; /* so you can move it all around */ 
text-align: /* where ever you want /*; 
font-family:'digital-clock-font';
src: url('put_the_location_to_your_font.ttf or .otf'); 
border-style: solid #COLOR'

Also, you cand add all TD numbers in one div and class it:

<div class="numbers"> 
<td id="one"> 25,99 <td> 
<td id="two"> 25,99 <td> 
/* and the rest */

I think there is no way to style your content only by html.

Second Also you cand add css into your HTML:

<!doctype> 
<html lang="en'>
<head> 
<meta charset="UTF-8> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title> Name Page </title> 
</head> 
<body> 
<style> 
/* HERE WRITE THE STYLE */ 
</style>
</body> 
</html>

Upvotes: 0

Dai
Dai

Reputation: 155370

This is what I came up with - though I couldn't quickly figure out way to exclude the background image from the gaps between cells in the first column:

body {
    font-family: sans-serif;
    font-size: xx-large;
}

table {
    border-spacing: 5px;
    border-collapse: separate;
    background: linear-gradient(0deg, rgba(46,178,240,1) 0%, rgba(138,29,208,1) 100%);
}
table > tbody {
    /* Setting the background-image on the tbody may work as well, but won't be rendered in the gaps between cells. */
    /*background: linear-gradient(0deg, rgba(46,178,240,1) 0%, rgba(138,29,208,1) 100%);*/
}

tbody > tr > td {
    padding: 0.25em 0.5em;
    margin: 0.5em;
}
tbody > tr > td:nth-child(1) {
    background-color: white;
}
tbody > tr > td:nth-child(2) {
    color: white;
    background-color: rgba( 0, 0, 0, 0.2 );
    text-shadow: 0px 6px 6px #FFFFFF;
}
<table>
      <tbody>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
        <tr>
          <td>Item</td>
          <td>25,99</td>
        </tr>
      </tbody>
    </table>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273389

You can play with background like below

td {
  padding:10px
}
td:first-child {
  background:#fff; /* don't show the gradient for the first td */
}
/* add a extra layer to darken the gradient */
td:last-child {
  background:linear-gradient(rgba(0,0,0,0.3) 0 0) 
    bottom /calc(100% - 10px) calc(100% - 5px) no-repeat;
  color:#fff;
}
tr:last-child td:last-child {
  padding-bottom:15px;
  background:linear-gradient(rgba(0,0,0,0.3) 0 0) 
    center /calc(100% - 10px) calc(100% - 10px) no-repeat;
}
table {
  background:linear-gradient(red,lightblue); /* apply your gradient to the table */
}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>Item</td>
        <td>25,99</td>
      </tr>
      <tr>
        <td>Item</td>
        <td>25,99</td>
      </tr>
      <tr>
        <td>Item</td>
        <td>25,99</td>
      </tr>
      <tr>
        <td>Item</td>
        <td>25,99</td>
      </tr>
      <tr>
        <td>Item</td>
        <td>25,99</td>
      </tr>
    </tbody>
  </table>
</body>

Upvotes: 4

Related Questions