0

状況：

幅が に設定されたテーブルで100%、内部に幅のあるセルがあり1000pxます。テーブルは中央に配置され、セルも中央に配置されます。

セルと同じ色で、中央のセルの先頭で終了する左から右、右から左へのグラデーションが必要です。

問題は、ブラウザのサイズに関係なく、ページ全体を占有すること100%です1000px。

グラデーションはパーセンテージで設定されているため、可能であれば、解像度/モニターが小さい場合、またはウィンドウのサイズが変更されている場合、グラデーションがそのセルの先頭で停止するようにするにはどうすればよいですか?

4

1 に答える 1

0

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/

于 2012-12-04T01:53:28.167 に答える