8

クラス「productsTable」の HTML テーブルがあります。テーブル内の各セルに境界線を付けたい。今、スタイルシートで次のことを試しましたが、2つの機能はありません。私は何を間違っていますか？ありがとうございました

td.productsTable
{
    border: 1px dotted #999999;
}

.productsTable td
{
    border: 1px dotted #999999;
}

HTML:

<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>           
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
4

4 に答える 4

10

td.productsTable クラス<td>に要素がないため、機能しません。productsTable

ただし、2番目のCSSルールである.productsTable td、これは<td>、クラスを持つ親要素を持つ要素があるため、機能しますproductsTable。

私はこれを簡単にいじりました、そしてあなたはそれが正しく機能しているのを見ることができます：

td {
  border: 1px dotted #999;
}
<table width="100%" height="100%" cellspacing="2px;">
  <tr>
    <td width="40%">We Offer:</td>
    <td width="20%" align="center">e-phone FREE</td>
    <td width="20%" align="center">Personal</td>
    <td width="20%" align="center">Pro PBX</td>
  </tr>
  <tr>
    <td width="40%">Pricing</td>
    <td width="20%" align="center">FREE</td>
    <td width="20%" align="center">£3 per month</td>
    <td width="20%" align="center">From £5 per month</td>
  </tr>
</table>

これが機能しない場合は、CSSファイルが正しくリンクされていないか、これをオーバーライドする別のCSSルールがある可能性があります。要素を調べてみてください。

于 2012-05-28T11:13:18.367 に答える
5

テーブルの各セルに境界線を付けたいと思います。

私が理解しているのは、次のようなセルの境界線が必要なことです。

テーブル

これがあなたが欲しいもののフィドルです。

次のCSSを使用します。

table.productsTable {
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: separate;
    background-color: white;
}

table.productsTable td {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: gray;
    background-color: white;
    -moz-border-radius: ;
}

これがお役に立てば幸いです。

于 2012-05-28T11:23:08.530 に答える
1

次のように書きます。

.products td
{
    border: 1px dotted #999999;
}

HTML

<table class="products">
 <tr>
  <td></td>
</tr>
</table>
于 2012-05-28T10:59:46.670 に答える