CODEWITHSUNDEEP
htmlcss
user3760100
user3760100

Reputation: 685

Why does the inner nested table inherit border property from the outer border, given that border property can't be inherited?

The inner nested table seems to be inheriting the border property from the outer table.But border property is not an inheritable property. Why is it inherited in the code for my form, which I laid out using a table?

<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>

There is a nested table in the code above, I am specifying it's code here:

<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>

Here is the relevant CSS for the code above:

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;
}

For instance, if you put a border property for a body element, the paragraphs inside the body don't inherit the border and consequently we don't see borders surrounding every paragraph in the body. Why isn't it the same for tables?

Upvotes: 0

Views: 879

Answers (2)

BoltClock
BoltClock

Reputation: 724112

There's no inheritance going on; you've simply specified the border (as well as the padding and the background) to be applied to any table:

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

You will either need to remove the border from the inner table, or find a way to select just the outer table to apply the border.

Upvotes: 3

sareed
sareed

Reputation: 780

From a cursory glance it is because you have defined the border for table thus it applies to all table tags. If you want to change it make table table border: none;

Upvotes: 2

Related Questions