6

角が丸くなるようにテーブルのスタイルを設定する必要があります。

私はちょうどそれについて最善の方法を見ています：

通常、角を丸くする div のスタイルを設定するときは、上部と下部に空のコメントがある 2 つの div を使用し、サイズ変更と背景画像の CSS をそれらに適用します。

ただし、テーブルには内部境界線があるため、実際のセル境界線と一致するように、隅の背景画像の垂直線を慎重に揃える必要があります。

ここまでは明らかですか？

だから私は他の人がこれにどのようにアプローチするのか疑問に思っていました. 私ができる最善のことは、1 つの完全な固定サイズの背景画像、境界線などを使用し、その上に境界線のないテーブルをオーバーレイすることだと思います。結局、テーブルは常に同じサイズになります。

誰かがより良い方法を考えることができますか?

4

6 に答える 6

4

それを行う25の方法.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

実際、それを行うにはあまりにも多くの方法があります。

于 2008-11-12T16:42:11.133 に答える
3

境界線ではなく角だけで背景画像を作成することをお勧めします。クラスを左上、右上、左下、右下のセルに適用して、コーナー背景画像を使用するように定義します。

css で境界線のスタイルを設定します。それらを背景画像に入れないでください。

あなたのアプローチでは、背景画像の垂直線が実際の表のセルの境界線と一致しないことになります。

于 2008-11-12T16:26:15.473 に答える
2

http://www.roundedcornr.com/を試しましたか?

于 2008-11-12T16:27:54.017 に答える
1

より良い方法は、背景の角があり、上下左右の背景が繰り返される 9 グリッドです。

あなたの表はセル5に入ります

編集

コメントに投稿されているように、9 グリッドでは効果を達成できません。あなたは12グリッドシステムをしなければなりません（今私が作ったものです:)

ライブデモ

.

コード：

警告: きれいではありませんが、機能します

<html>
<head>
    <style>


        .cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
        .cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold;  }
        .cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}

        .cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
        .cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
        .cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }

        .cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
        .cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal;  }
        .cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}


        .cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
        .cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
        .cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }

        .lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }

    </style>
</head>
<body>


<table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th class="cell1"></th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2">&nbsp;</th>
      <th class="cell2 lastcolumn">&nbsp;</th>
      <th class="cell3"></th>
    </tr>
    <tr>
      <th class="cell4">&nbsp;</th>
      <th class="cell5">Incoming calls</th>
      <th class="cell5">National calls</th>
      <th class="cell5">Calls to US &amp; Canada</th>
      <th class="cell5">Calls to other Phones</th>
      <th class="cell5">Calls to other Countries</th>
      <th class="cell5 lastcolumn">SMS text messages</th>
      <th class="cell6">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell7"></td>
      <td class="cell8">Select</td>
      <td class="cell8">country</td>
      <td class="cell8">from</td>
      <td class="cell8">dropdown</td>
      <td class="cell8">list</td>
      <td class="cell8 lastcolumn">above</td>
      <td class="cell9"></td>
    </tr>
    <tr>
      <td class="cell10"></td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11">&nbsp;</td>
      <td class="cell11 lastcolumn">&nbsp;</td>
      <td class="cell12"></td>
    </tr>
  </tbody>
</table>


</body>
</html>

注: SO がコードから削除する非改行スペースがいくつかあります。詳細については、リビングデモをご覧ください

楽しみ！

于 2008-11-12T16:28:32.783 に答える
1

このようなことをして...

XHTML: (申し訳ありませんが、最初の '<' を削除する必要がありました。正常に投稿できないためです。この JEFF を修正してください!)

table id="pricing" border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Incoming calls</th>
      <th>National calls</th>
      <th>Calls to US &amp; Canada</th>
      <th>Calls to other Phones</th>
      <th>Calls to other Countries</th>
      <th>SMS text messages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Select</td>
      <td>country</td>
      <td>from</td>
      <td>dropdown</td>
      <td>list</td>
      <td>above</td>
    </tr>
  </tbody>
</table>

CSS: #pricing { font-weight:bold; text-align:center }

  #pricing thead
  {
    background-image:url("images/pricing_top.gif");
    background-position:top;
    background-repeat:no-repeat;
    padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
  }

  #pricing th
  {
    background-image:url("images/pricing_header_bg.gif");
    background-repeat:repeat-y;
    border-bottom:1px solid #c3c2c2;
    width:100px /* replace 100px with the width of pricing_header_bg.gif */
  }

  #pricing tbody
  {
    background-image:url("images/pricing_bottom.gif");
    background-position:bottom;
    background-repeat:no-repeat;
    padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
  }

  #pricing td
  {
    background-image:url("images/pricing_cell_bg.gif");
    background-repeat:repeat-y;
    width:100px /* replace 100px with the width of pricing_cell_bg.gif */
  }

唯一の欠点は、4 つのイメージを作成する必要があることですが、それほど時間はかかりません。右側にドロップ シャドウを追加し、それに応じて background-image と width プロパティを変更する場合は、各行の最後のセルにクラスを追加する必要もあります。

于 2008-11-12T16:38:41.280 に答える
1

元のアイデアを利用して、各コーナー セルにクラスを追加して、それぞれの問題のある境界線を効果的にオフにすることができます。次に、<thead> 要素と <tfoot> 要素で全幅の背景画像を使用して、丸みを帯びた角を考慮することができます。

残りのセルの境界線をオンにすると、線が正しく整列します。

残っている唯一の問題は、爆破されたドロップ シャドウを考慮することです。それは別の練習です。

于 2008-11-12T20:07:45.463 に答える