前面桌下的自由空间

Question

我有这样的div标签。

<div class="col-md-11" style="margin-left: -55px; width: 94%;">
     <div style="margin-top: 20px;">
          <pre id="data" class="prettyprint">
          </pre>
     </div>
</div>

我使用<pre>

在javascript内插入表格

function createUserData() {
        document.getElementById('data').innerHTML = 
            '<table class="table table-striped table-bordered table-hover">' +
                '<tr>' + 
                      '<td>User name: </td><td>${user.name}</td>' + 
                '</tr>' +
                '<tr>' + 
                      '<td>Email: </td><td>${user.emailAddress}</td>' +
                '</tr>' +
                '<tr>' +
                       '<td>Organization: </td><td>${user.organization}</td>' +
                '</tr>' +
                '<tr>' + 
                       '<td>Certificate: </td><td>${user.certificate}</td>' +
                '</tr>' + 
             '</table>';
    }

但它在表格下添加了简洁的线条或类似的东西。如何摆脱它？ 至于表 - 我使用twitter bootstrap 3来设置样式。

Answer 1

pre代码只应包含phrasing content，其中table不是。

 Line 6, Column 12: Element table not allowed as child of element pre in this context. 
<pre><table><tr><td>hi</td></tr></table></pre>
Contexts in which element table may be used:
Where flow content is expected.
Content model for element pre:
 Phrasing content.

详细了解内容类别。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content

因为你的html无效，所以会发生奇怪的事情。