CODEWITHSUNDEEP
csshtml-table
saomi
saomi

Reputation: 885

Gradients throw cells in a table

I have to make a something like a Gantt Diagram. This is what I already accomplish: http://tinypic.com/view.php?pic=160ecxu&s=6.

For this case I'm working with tables. As you can see in the image I have a gradient in the 1st, 2nd and last rows. I must do it for all the green cells. As you can see in the last row although has the gradient the white lines that separte each column disappeared because I made a colspan=11. That's the only way I found to make something similar

Here's some code

HTML

    <tr>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
    </tr>
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
    </tr>
...
...
...
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
       <div class="group">
           <td class="selected" colspan="11"></td>
       </div>
    </tr>

and CSS

table tr td.selected{
   /*the gradient code here*/
}

/* I TRIED TO SET A STYLE FOR THE GROUP BUT WITHOUT ANY RESULTS*/
table tr div.group{
    background-color:red;   
}

Anyone has any tip for keeping the white lines and the gradient?

Upvotes: 1

Views: 605

Answers (2)

Jonathan
Jonathan

Reputation: 6742

You should split the <td>'s to eleven single elements and use background-size and background-position in CSS to make the gradient look like it's spanned over the eleven elements.

Example Fiddle: here.

Your HTML code could be like this:

<tr>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days selected colspan-11 col-1">&nbsp;</td>
   <td class="days selected colspan-11 col-2">&nbsp;</td>
   <td class="days selected colspan-11 col-3">&nbsp;</td>
   <td class="days selected colspan-11 col-4">&nbsp;</td>
   <td class="days selected colspan-11 col-5">&nbsp;</td>
   <td class="days selected colspan-11 col-6">&nbsp;</td>
   <td class="days selected colspan-11 col-7">&nbsp;</td>
   <td class="days selected colspan-11 col-8">&nbsp;</td>
   <td class="days selected colspan-11 col-9">&nbsp;</td>
   <td class="days selected colspan-11 col-10">&nbsp;</td>
   <td class="days selected colspan-11 col-11">&nbsp;</td>
</tr>

Instead of one <td colspan="11"> you have eleven <td style="colspan-11 col-n"> elements where n is the number of the element.

In your CSS you should make the background gradient size as big as the eleven elements are together. This is 11 * width + 10 * border width, because you only have ten borders within the area. In this situation my <td>'s have a width of 30px and my borders have a width of 2px, so we should make the background 11 * 30px + 10 * 2px = 350px wide. We can do this with background-size in CSS:

td.colspan-11 {
    background-size: 350px 1px;
}

Then you need to position the background gradient right in each element, to make it appear as one big gradient. For the n'th element, we need to move the gradient n * (width + border width) to the left. This is done using this code:

td.colspan-11.col-1 {
    background-position: 0 0;
}

td.colspan-11.col-2 {
    background-position: -32px 0;
}

td.colspan-11.col-3 {
    background-position: -64px 0;
}

/* etc. */

See my Fiddle for the full code and a working example.

Upvotes: 3

paulslater19
paulslater19

Reputation: 5917

The only things I can think of, which are all ugly:

  • overlaying another table on top to get the borders to show
  • overlay a div which will have the background, but give it some transparency, so that the borders show
  • Split the background up between the cells (or don't have a gradient)

Upvotes: 0

Related Questions