本文介绍了为什么不嵌套< table>元素尊重HTML层次结构?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
.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标签。
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层次结构?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-30 20:51