既然不能继承边框属性，为什么内部嵌套表格会从外边框继承边框属性？答案

【问题标题】：Why does the inner nested table inherit border property from the outer border, given that border property can't be inherited?既然不能继承边框属性，为什么内部嵌套表格会从外边框继承边框属性？
【发布时间】：2015-03-04 22:41:17
【问题描述】：

内部嵌套表似乎是从外部表继承边框属性。但是边框属性不是可继承的属性。为什么它在我使用表格布局的表单的代码中继承？

<table>
  <tr>
    <th>
      Choose your beans:
    </th>
    <td>
      <select name="beans">
        <option value="House Blend">
          House Blend
        </option>
        <option value="Bolivia">
          Shade Grown Bolivia Supremo
        </option>
        <option value="Guatemala">
          Organic Guatemala
        </option>
        <option value="Kenya">
          Kenya
        </option>
      </select>
    </td>
  </tr>

  <tr>
    <th>
      Type:
    </th>
    <td>
      <input type="radio" name="beantype" value="whole" id="whole" />
      Whole bean
      <br />
      <input type="radio" name="beantype" value="ground" id="ground" checked="checked" />

      Ground
    </td>
  </tr>

  <tr>
    <th>
      Extras:
    </th>
    <td>
      <input type="checkbox" name="extras[]" value="giftwrap" id="giftwrap" />
      Gift wrap
      <br />
      <input type="checkbox" name="extras[]" value="catalog" id="catalog" checked="checked" />
      Include catalog with order
    </td>
  </tr>

  <tr>
    <th>
      Ship to:
    </th>
    <td>
      <table>
        <tr>
          <td>
            Name:
          </td>
          <td>
            <input type="text" name="name" id="name" value="" />
          </td>
        </tr>
        <tr>
          <td>
            Address:
          </td>
          <td>
            <input type="text" name="address" id="address" value="" />
          </td>
        </tr>
        <tr>
          <td>
            City:
          </td>
          <td>
            <input type="text" name="city" id="city" value="" />
          </td>
        </tr>
        <tr>
          <td>
            State:
          </td>
          <td>
            <input type="text" name="state" id="state" value="" />
          </td>
        </tr>
        <tr>
          <td>
            Zip:
          </td>
          <td>
            <input type="text" name="zip" id="zip" value="" />
          </td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <th>
      Customer Comments:
    </th>
    <td>
      <textarea name="comments" id="comments" rows="10" cols="48">
      </textarea>
    </td>
  </tr>

  <tr>
    <th>
    </th>
    <td>
      <input type="submit" value="Order Now" />
    </td>
  </tr>
</table>

上面的代码中有一个嵌套表，我在这里指定它的代码：

<table>
  <tr>
    <td>
      Name:
    </td>
    <td>
      <input type="text" name="name" id="name" value="" />
    </td>
  </tr>
  <tr>
    <td>
      Address:
    </td>
    <td>
      <input type="text" name="address" id="address" value="" />
    </td>
  </tr>
  <tr>
    <td>
      City:
    </td>
    <td>
      <input type="text" name="city" id="city" value="" />
    </td>
  </tr>
  <tr>
    <td>
      State:
    </td>
    <td>
      <input type="text" name="state" id="state" value="" />
    </td>
  </tr>
  <tr>
    <td>
      Zip:
    </td>
    <td>
      <input type="text" name="zip" id="zip" value="" />
    </td>
  </tr>
</table>

这是上面代码的相关CSS：

table {
  border: thin dotted #7e7e7e;
  padding: 10px;
  background-color: #e1ceb8;
}

th {
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  padding-top: 2px;
}

td {
  vertical-align: top;
  padding-bottom: 15px;
}

table table {
  padding: 0px;
}

table table td {
  text-align: right;
  padding-bottom: 0px;
}

例如，如果您为 body 元素设置了边框属性，则正文中的段落不会继承边框，因此我们看不到正文中每个段落周围的边框。为什么表格不一样？

【问题讨论】：

标签： html css

【解决方案1】：

没有继承；您只需指定要应用于任何表格的边框（以及填充和背景）：

table {
  border: thin dotted #7e7e7e;
  padding: 10px;
  background-color: #e1ceb8;
}

您要么需要从内部表格中删除边框，要么找到一种仅选择外部表格来应用边框的方法。

【讨论】：

【解决方案2】：

粗略一看，这是因为您已经为table 定义了边框，因此它适用于所有表格标签。如果你想改变它，让table tableborder: none;

【讨论】：