如何使用JavaScript分离和协调HTML上的空格_Javascript_Html

如何使用JavaScript分离和协调HTML上的空格

javascript html

如何使用JavaScript分离和协调HTML上的空格,javascript,html,Javascript,Html,我有一个模板HTML页面，我想尝试一个新的HTML。事实上，我几乎完成了它，但我无法解决空间问题。我想将所有列滑动到另一个并没有任何空间的列的下一列。因为我的描述部分很长，我想在该区域创建更多空间：如何使用此代码协调这些空间： <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div id="logoDiv"><img id="logo

我有一个模板HTML页面，我想尝试一个新的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>






"+
“+个人/部门+
“”+person.description+“”
$（tblRow）.appendTo（“#userdata tbody”）；
});

这是表的正确行为

您可以使用以下内容为最后一行添加最小宽度：

<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>


$.each（data.person，function（i，person）{
变量tblRow=
“”+person.revisiondate+
""+
“+个人/部门+
“”+person.description+“”
$（tblRow）.appendTo（“#userdata tbody”）；
});

但是在样式表中会更好。

我发现这个问题在一些人的帮助下得到了解决。谢谢。在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>


修订日期
文件名
部门
描述

我想做的事

来源