Question

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

<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元素添加border属性，则body内的段落不会继承边框，因此我们不会看到正文中每个段落的边框。为什么表格不一样？

Answer 1

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

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

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

Answer 2

从粗略的一瞥，这是因为您已为table定义了边框，因此它适用于所有表格标签。如果你想改变它，请table table border：none;

为什么内部嵌套表从外边框继承border属性，因为border属性不能被继承？

2 个答案: