Question

The situation:

A table with width set to 100%, that has a cell inside with 1000px width. The table is centered, and so is the cell.

I would like to have a gradient from left to right, and right to left that would end at the beginning of the centered cell, with the same color as the cell.

The problem is, to occupy the whole page, no matter what size the browser is, the table is set to 100%, the cell is set to 1000px so it’ll never change its size,

How can i achieve, if possible, what i want, making sure that in smaller resolutions/monitors or with window re sizing, the gradient will stop at the beginning of that cell, since gradients are set with percentage?

Answer 1

Is something like this what you want?

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="left">&nbsp;</td>
    <td class="center">Your content goes here</td>
    <td class="right">&nbsp;</td>
  </tr>
</table>​

styled such that

table {
  /* the table takes up all the space */
  width: 100%;
}
td.center {
  /* there is one container column */
  width: 1000px;
  text-align: center;
  color: white;
  background-color: black; /* some fixed background color */
}
/* and two columns on the side which fade to some other color, in the respective directions */
td.left {
  background: -webkit-gradient(linear, left, right, from(white), to(black));
  background: -webkit-linear-gradient(left, white, black);
  background:    -moz-linear-gradient(left, white, black);
  background:     -ms-linear-gradient(left, white, black);
  background:      -o-linear-gradient(left, white, black);
  background:         linear-gradient(left, white, black);
}
td.right {
  background: -webkit-gradient(linear, right, left, from(white), to(black));
  background: -webkit-linear-gradient(right, white, black);
  background:    -moz-linear-gradient(right, white, black);
  background:     -ms-linear-gradient(right, white, black);
  background:      -o-linear-gradient(right, white, black);
  background:         linear-gradient(right, white, black);
}

You can try this example here: http://jsfiddle.net/qvum4/1/

UPDATE

However, if you don’t have a specific reason to use tables, and you only want to achieve this effect, you shouldn’t use tables.
There are a few jQuery gradient plugins around, that you can try to use.

Of you could develop a custom jQuery solution, in order to keep all the styling gibberish outside of the markup.
Try this example here: http://jsfiddle.net/YnUpY/1/