0

テーブルの見出しに赤い実線の境界線を付け、テーブルの残りの部分に点線の黒い境界線を付けたいと思います。

以下のコードを使用すると、すべてが正しいですが、THの左側と右側が黒い点線で示されています。<table>THスタイル宣言内の境界線をオーバーライドする方法はありますか？

これが私が達成したいことです：

http://s13.postimage.org/5bboz4vef/target.png

<style type="text/css">
table {
    border-style:none dotted dotted dotted;
    border-collapse: collapse;
}
table th {
    border: 2px solid red;
}
</style>

<table >
  <thead>
   <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
   <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
   </tr>
  </tbody>
</table>
4

2 に答える 2

2

簡単な解決策は、th境界線の幅を境界線の幅以上に設定するtableことです (許容できる場合)。たとえば、追加

table { border-width: 2px; }

それらを等しくするために。あなたの例では、幅は初期値でmediumあり、通常はブラウザーで 3px または 4px にマップされます。

それ以外の場合は、要素に左または右の境界線が設定されていない別の戦略が必要です (Zolthan Toth の回答を参照) table。

その理由は、[border conflict resolution][1] ルールによると、幅の広い境界線が優先されるためです (等幅の境界線の場合は よりも勝ちsolidますdotted)。

于 2012-07-15T13:50:40.617 に答える
0

これを試してください - http://jsfiddle.net/eaTLp/

table {
    border-style:none none dotted;
    border-collapse: collapse;
}

table th {
    border: 2px solid red;
}

table td:first-child {
    border-left: dotted;
}

table td:last-child {
    border-right: dotted;
}
​

テーブルの下部にのみ点線の境界線を付けています。<td>左と右では、すべての行の最初と最後を:first-child選択し、:last-childそれぞれに左と右の境界線を割り当てます。

于 2012-07-15T10:37:55.590 に答える