Question

我有一个带有“productsTable”类的HTML表。我想给表中的每个单元格一个边框。现在我在样式表中尝试了以下内容，但两者都没有。我究竟做错了什么？谢谢

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>

Answer 1

td.productsTable 赢了，因为您没有<td>个productsTable个元素。

但是，您的第二个CSS规则.productsTable td，此将起作用，因为您的<td>个元素的父元素具有类productsTable。

我已经对此做了一个快速的提示，你可以看到它正常工作：

http://jsfiddle.net/3bybX/

如果这对您不起作用，可能是您没有正确链接您的CSS文件，或者有另一个CSS规则覆盖此文件。请尝试inspecting element查看。

Answer 2

我想给表格中的每个单元格一个边框。

我所理解的是你想要像这样的细胞边界：

table

以下是您想要的 fiddle 。

使用以下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: ;
}

希望这会有所帮助。

Answer 3

这样写：

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

<强> HTML

<table class="products">
 <tr>
  <td></td>
</tr>
</table>

Answer 4

以下代码执行以下操作： - 1.给td的单边框 2.与桌子分开的边界。

环境： - 适用于FF 34.0。

未审讯html6： - 要使用html6运行它，请使用html：x例如。 html：head，html：title等。

<!DOCTYPE html>
<html>
<head>
    <script>
    </script>
    <title>Welcome to the jungle</title>
    <style>
.table_main {
        border-top-style: ridge;
        border-bottom-style: ridge;
        border-left-style: ridge;
        border-right-style: ridge;
        border-color: red;
        border-width: 3px;
      }

.table_main td {
    background: #A38055;    
    border-right: solid 1px white ;
    border-bottom: 1px solid white;
    text-align: center;
}

.table_main th {
    background: #DCDCDC;
    border-right: solid 1px white ;
    border-bottom: 1px solid white;
    text-align: center;
}

  </style>
</head>
  <body>
    <h1>Welcome to the jungle</h1>
    <table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
     <thead>       <th>THead1</th> <th>THead2</th> <th>THead3</th>
     </thead> 
      <tbody>
        <tr> <td>A</td> <td>B</td> <td>C</td> </tr>
        <tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>
        <tr> <td>Xena</td> <td>Yoda</td> <td>Zohan</td> </tr>
      </tbody>
    </table>

  </body>
</html>

应用表格单元格边框

4 个答案: