下方表格內的可用空間

我有這樣的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>

我使用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>'; 
    }

插入表內<pre>但它在桌下增加了清潔線或這樣的事情。如何擺脫它？至於表 - 我使用twitter bootstrap 3來設計它。

enter image description here

來源

2014-10-09 lapots

使用Chrome的開發工具來查看屬於其中一個元素的邊距或填充，然後將該值設置爲0. – 2014-10-09 14:43:40

我明白了。這是桌子 - 它有'margin-bottom：20px'。我將它改爲'0px;'並且它工作正常。 – lapots 2014-10-09 14:51:13

另請參閱下面的「答案」，這實際上是一條評論。你正在把東西放在不屬於自己的東西前面。 – 2014-10-09 14:58:49

一個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.

因爲你有無效的HTML，奇怪的事情會發生。

來源

2014-10-09 14:51:23 briansol

下方表格內的可用空間

回答

相關問題