Why don't these nested <table> elements respect HTML hierarchy?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: 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 {