8

我有一个带有“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>
4

4 回答 4

10

td.productsTable 不会工作，因为你没有一个类<td>的元素。productsTable

但是，您的第二个 CSS 规则 ，.productsTable td这将起作用，因为您确实有<td>具有 class 的父元素的元素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 回答
0

下面的代码执行以下操作：- 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>
于 2014-12-08T15:28:29.543 回答