Почему внутренняя вложенная таблица наследует свойство границы от внешней границы, если свойство границы не может быть унаследовано?

Question

Внутренняя вложенная таблица, по-видимому, наследует свойство границы из внешней таблицы. Но свойство границы не является наследуемым свойством. Почему он унаследован в коде для моей формы, который я написал с помощью таблицы?

<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, абзацы внутри тела не наследуют границу, и поэтому мы не видим границ вокруг каждого абзаца в теле. Почему это не так для таблиц?

Answer 1

С беглым взглядом это потому, что вы определили границу для table, поэтому она применима ко всем табличным тегам. Если вы хотите его изменить, сделайте table table border: none;

Answer 2

Наследование не происходит; вы просто указали границы (а также заполнение и фона), который будет применен к любой таблице:

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

Вам нужно будет либо удалить границу из внутренней таблицы, или найти способ, чтобы выбрать только внешний стол для применения границы.