Html 应用表格单元格边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10783491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying Table cell borders
提问by DextrousDave
I have an HTML table with the class "productsTable". I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You
我有一个带有“productsTable”类的 HTML 表。我想给表格中的每个单元格一个边框。现在我在我的样式表中尝试了以下内容，但这两个都不起作用。我究竟做错了什么？谢谢你
td.productsTable
{
border: 1px dotted #999999;
}
.productsTable td
{
border: 1px dotted #999999;
}
HTML:
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>
采纳答案by Curt
td.productsTablewon't workbecause you have no <td>elements with a productsTableclass.
td.productsTable不会工作，因为你没有类的<td>元素productsTable。
However, your second CSS rule, .productsTable td, this will workbecause you do have <td>elements that have a parent element with the class productsTable.
但是，您的第二个 CSS 规则 ,.productsTable td这将起作用，因为您确实有<td>具有 class 的父元素的元素productsTable。
I've made a quick fiddle of this, and you can see it working correctly:
我已经对此进行了快速调整，您可以看到它正常工作：
If this isn't working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting elementto see.
如果这对您不起作用，则可能是您没有正确链接您的 CSS 文件，或者有另一个 CSS 规则覆盖了它。尝试检查元素以查看。
回答by AlphaMale
I want to give each cell in the table a border.
我想给表格中的每个单元格一个边框。
What I've understand is you want cell border like this:
我所了解的是你想要这样的单元格边框：
Here is the fiddleof what you want.
这是你想要的小提琴。
Use following CSS:
使用以下 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: ;
}
? Hope this helps.
? 希望这可以帮助。
回答by sandeep
write like this:
像这样写：
.products td
{
border: 1px dotted #999999;
}
HTML
HTML
<table class="products">
<tr>
<td></td>
</tr>
</table>
回答by Plankton
Below code does the following:- 1. gives single border to td's 2. separate border to the table.
下面的代码执行以下操作：- 1. 为 td 提供单个边框 2. 为表格提供单独的边框。
Environment:- Works on FF 34.0.
环境：- 适用于 FF 34.0。
Untried for html6:- To run it using html6, try it with html:x eg. html:head, html:title, etc.
未尝试 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>
