初级 Web 开发人员：如何为表格行创建边框答案

【问题标题】：Beginner Web Developer: How to create borders for Table Rows初级 Web 开发人员：如何为表格行创建边框
【发布时间】：2014-06-02 01:46:13
【问题描述】：

我是一名初级网络开发人员，正在学习如何创建表格。我需要一个表格，表格周围有边框，每一行都有边框（有 6 行）。该表需要如下所示：

这是我现在的代码：

<!DOCTYPE html>

<html>

<head>
<style type="text/css">
<!--
table, tr, td  {border: 1px solid;
               padding: 4px;
               border-color: 628ECC;
               }
tr             {border: 1 px solid;
                border-color:628ECC;
               }
-->
</style>

<meta charset="utf-8" />
<title>RMHCTable</title>

</head>

<body>

<header>
  <nav>
  </nav>
</header>

<section>
  <aside>
  </aside>

<article>

<h1 style=font-family:"Futura">Gift Options and Benefits</h1>

<table>

<tr class="first row">
<td>Type of Gift</td>
<td>Income to Donor</td>
<td>Taxation of Income</td>
<td>Benefits to Donor</td>
<td>Value to the St. Louis<br>Ronald McDonald House</td>
</tr>

<tr>
<td>1. Cash or Security</td>
<td>None</td>
<td>None</td>
<td>Tax deduction on the current market<br> value. Avoidance of capital gains tax<br>
on appreciated security.</td>
<td>Immediate receipt of cash<br> or security gift.</td>
</tr>

<tr>
<td>2. Bequest in Will</td>
<td>N/A</td>
<td>N/A</td>
<td>Desired estate distribution.<br> Reduced estate taxes.</td>
<td>Receipt of bequest at death<br>of donor.</td>
</tr>

<tr>
<td>3. Charitable Gift Annuity</td>
<td>Fixed amount based on<br>actuarial tables.</td>
<td>Portion of income<br> is non-taxable.</td>
<td>Substantial tax deduction in year of<br>gift. Reduced capital gains tax.</td>
<td>Property contributed;<br>activated as financial<br>benefit at death</td>
</tr>

<tr>
<td>4. Charitable<br>Remainder Trust<br>Annuity or Unitrust</td>
<td>Fixed income or variable income based on annual value of Trust</td>
<td>Income taxable<br>based on annual<br>income.</td>
<td>Initial income tax deduction based<br>on the market value of the gift,<br>
reduced by factors from the IRS<br>
which determine value of the life estate.<br>No capital gains tax.</td>
<td>Receipt of charitable<br>remainder at death.</td>
</tr>

<tr>
<td>5. Life Insurance<br>Policy</td>
<td>None</td>
<td>None</td>
<td>Tax decuctions on premiums paid,<br>dividend assigned, cash or replacement<br>
value. Avoidance of probate, estate/<br>inheritance taxes.</td>
<td>Receiipt of donor financial<br>benefits at death or<br>liquidation of policy.</td>
</tr>

<tr>
<td>6. Gift of Persoanl<br>Residence</td>
<td>N/A</td>
<td>N/A</td>
<td>Immediate tax decution for value<br>of remainder</td>
<td>Ownership of farm or<br>residence at death of<br>life tenants.</td>
</tr>

</table>

</article>

</section>
  <footer>
  </footer>

</body>
</html>

我一直无法理解一般的样式表。我了解内联样式，但在使用 CSS 时遇到了麻烦。

【问题讨论】：

你能发布你有什么CSS代码吗？也许创建一个 JSfiddle 并在您的问题中发布链接。
我认为你必须检查 colspan 和 rowspan 属性。 aprende-web.net/html/html6_3.php

标签： html css html-table border

【解决方案1】：

<tr> 标签在设置样式时非常严格，所以你需要这样的东西：

table{
    border:solid 1px #000000; // give a border to the entire outside
    border-collapse:collapse; // tell the cells to merge their borders so that you do not get double-width inter-borders where one <td> touches another <td>
}
td{
    border-top:solid 1px #000000; // the table already has a border all around so tell the <td>s to only apply a top border
}

JSFiddle Demo

【讨论】：

【解决方案2】：

所以你不能在一行上设置边框属性。这里重要的 CSS 是：

table {
    border-collapse: collapse; /* this is pretty straight forward 
                                  but it collapses each of the individual
                                  cell borders into each other */
    border: 1px solid black; /* this puts the border around the whole table */
}

td {
    border-bottom: 1px solid black; /* this puts the bottom border on each row */
    padding: 10px; /* this could be set to anything but gives your table a little spacing. */
}

我希望这会有所帮助。请参阅http://jsfiddle.net/RF5jC/ 进行演示。

【讨论】：

【解决方案3】：

您可以尝试使用 box-shadow ：DEMO

tr             {
    box-shadow:0 0 0 1px red;
               }

你也可以正确声明颜色：628ECC is #628ECC

【讨论】：