2017-04-10 7 views
0

新しいHTMLを試してみたいテンプレートHTMLページがあります。実際、私はほとんど終わったが、私は宇宙問題を解決できなかった。私はすべての列を、スペースを持たない別の列の次の列にスライドさせたい。私の記述部分が長いので、私はその領域に多くのスペースを作成したいので:JavaScriptでHTML上のスペースを区切って調整する方法

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
    <div id="logoDiv"><img id="logo" src="images/logo.png" /></div> 
    <form id="search_toolbar" method="get" action="/solr/select"> 
     <input id="searchinput" type="text" name="q" value="search" size="28" maxlength="200" onfocus="searchBarOnFocus(this)" onblur="searchBarOnBlur(this)" /></form></div> 
    </br> 
</br> 
<div id="tabcontainer"><div id="tabs" class="nav"><span><a id="navtab" href="#" class="btn">Navigation</a></span> 
    <span><a id="searchtab" href="/solr/select" class="btn">Search</a></span> 
    <span><a id="viewtab" href="#" class="btn-highlight">View</a></span> 
    <span><a id="180DaysDocumentstab" class="btn" >180 Days Documents</a></span> 
</br> 
<div class="outer-container"> 
    <div class="container"> 
     <div class="header"><h1 class="removeBottomPadding"> 
     </br> 
     &nbsp; &nbsp; 180 Days Documents   
    </div> 
</div><div id="dmApplicability"><h2 id="dmApplicabilityTitle" class="removeBottomPadding"></h2><p></p></div><h1></h1><ol class="steplevel0"><li><div id="d534007e87" class="step"> 

<div class="note"><h4 class="removeTopBottomPadding noteText">NOTE</h4> 
    <div class="cautionText">This Documents Downloaded From ADDs Page/Last Revision Date : dd/mm/yy </div> 
</div> 
<div><table class="hoverRowBackEnabled setFixedHeaderEnabled"><thead><tr><th> 
</div></li></ol></div><div class="legendDiv" id="legendDiv"><div id="legend-anchor"> 
<div id="legendWindow" class="legendWindow hide"></div></div></div> 
<div id="scroller-anchor"></div><div id="scroller">      
<div id="zoom_container"><div class="landmarks" data-show-at-zoom="100" data-allow-drag="false"></div></div><h3 id="canvas-title"></h3></div></div></div></div> 
</div> 
<div class="tirDIV"></div> 

<table id="userdata" border="2"> 

    <th>Revision Date </th> 
    <th>Document Name </th> 
    <th>Department </th> 
    <th>Description </th> 

</table> 
<script> 
$.each(data.person, function(i, person) { 
    var tblRow = 

    "<tr><td>" + person.revisiondate + 
    "</td><td><a target='_blank' href='"+ person.documentname.split('href=')[0]+"' >"+person.documentname.split('href=')[0]+"</a></td>"+ 
    "<td>" + person.department + 
    "</td><td>" + person.description + "</td></tr>" 

    $(tblRow).appendTo("#userdata tbody"); 
}); 

</script> 
</body> 
</html> 

答えて

0

これは、の正しい動作です:私はこのコードでこれらのスペースを調整するにはどうすればよい

Example for my html

テーブル。

次のようなもので、あなたの最後の行の最小幅を追加することができます。

<script> 
$.each(data.person, function(i, person) { 
      var tblRow = 

"<tr><td>" + person.revisiondate + 
"</td><td><a target='_blank' href='"+ person.documentname.split('href=')[0]+"' >"+person.documentname.split('href=')[0]+"</a></td>"+ 
"<td>" + person.department + 
"</td><td style="min-width: 50%;">" + person.description + "</td></tr>" 

      $(tblRow).appendTo("#userdata tbody"); 
     }); 

</script> 

しかし、それは、スタイルシートの中に良いだろう。

0

この問題の解決方法は、一部の人の助けを借りて見つけました。ありがとうございました。 htmlで、あなたがタグを使用している場合。あなたは幅と高さを調整することができます。同様に、私がやりたい

<table id="userdata" border="2"> 

      <th width="12%"> Revision Date </th> 
      <th width="12%">Document Name </th> 
      <th width="12%">Department </th> 
      <th width="40%">&nbsp; Description</th> 

    </table> 

Here

ソース。 https://www.w3schools.com/tags/tag_th.asp

関連する問題