为什么不嵌套< table>元素尊重HTML层次结构？ [英] Why don't these nested <table> elements respect HTML hierarchy?

问题描述

  .outer-table {border：2px solid orange;}。outer-table th {border：2内部表格tr {border：2px solid blue;}。inner-table td {border：2px solid green;} table {width：100％;} tr {width：100％;} th，td {width：33.33333％;} tfoot td {width：100％;} th {padding：20px;} td {}  

 < table class =outer-table> < thead class =outer-table-head> < TR> < th>名字< / th> < th>姓氏< / th> <的第i;电话< /第> < / TR> < / THEAD> < tbody class =outer-table-body> < TR> < table class =inner-table> < TBODY> < TR> < TD> < input type =text/> < / TD> < TD> < input type =text/> < / TD> < TD> < input type =text/> < / TD> < / TR> < / tbody的> < TFOOT> < TR> < TD> < button class =remove-button>重置< / button> < button class =add-button>储存< /按钮> < / TD> < / TR> < / TFOOT> < /表> < / TR> < / tbody>< / table>  

解决方案

嵌套表格时，我相信你需要将内部表格放在td标签中，而不是tr标签。

JSFiddle here.

In this SSCCE, there is a <table> element nested inside another <table> element, but the way they render on the web page is not as expected, and when I checked in the Google Chrome Inspecter/DevTools, I noticed that the two <table> elements are appearing to be at the same level of the HTML hierarchy.

What am I missing here?

.outer-table {
  border: 2px solid orange;
}
.outer-table th {
  border: 2px solid red;
}
.inner-table tr {
  border: 2px solid blue;
}
.inner-table td {
  border: 2px solid green;
}
table {
  width: 100%;
}
tr {
  width: 100%;
}
th,
td {
  width: 33.33333%;
}
tfoot td {
  width: 100%;
}
th {
  padding: 20px;
}
td {}

<table class="outer-table">



  <thead class="outer-table-head">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Phone</th>
    </tr>
  </thead>



  <tbody class="outer-table-body">
    <tr>
      <table class="inner-table">
        <tbody>
          <tr>
            <td>
              <input type="text" />
            </td>
            <td>
              <input type="text" />
            </td>
            <td>
              <input type="text" />
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>
              <button class="remove-button">Reset</button>
              <button class="add-button">Save</button>
            </td>
          </tr>
        </tfoot>
      </table>
    </tr>
  </tbody>



</table>

解决方案

When nesting tables, I believe you need to place the inner table inside a td tag rather than a tr tag.

这篇关于为什么不嵌套< table>元素尊重HTML层次结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！