Html 对齐DIV表中的列

CSS:

Html:

主机名
IP地址
承认
发现日期
挑选
johndoelaptop1.corp.testcompany.com
10.1.1.10
Y
2013-10-21
alicelaptop1.corp.testcompany.com
10.1.1.10
Y
2013-10-21
boblaptop1.corp.testcompany.com
10.1.1.10
Y
2013-10-21

请给我解释一下，如何让每一列正确对齐，以使第1列第2行不会溢出到第2列第2行

例如：

主机名IP地址已确认发现日期选择

1bclw050821.corp.wsfsbank.com 10.1.1.10 Y 2013-10-21

---

不要对标题行使用

表格标题

。它是一行，请使用

表格行

：

<form id="form1" runat="server">
<div class="divtable">
    <div class="headrow">
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Hostname</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">IP Address</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Acknowledged</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Date Discovered</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Select</div>
    </div>
    <div class="divrow">
        <div class="content">johndoelaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
    <div class="divrow">
        <div class="content">alicelaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
    <div class="divrow">
        <div class="content">boblaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
</div>

---

您是否有一些未在此处显示的CSS？如果它是一个表，为什么不使用

？抱歉，忘记添加CSS…..我已经了解到，在使用表时，您不能设置div的限制。。。因此，如果我的表是动态填充的，div将继续无限增长。这是我的理解。

<form id="form1" runat="server">
<div class="divtable">
    <div class="headrow">
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Hostname</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">IP Address</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Acknowledged</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Date Discovered</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Select</div>
    </div>
    <div class="divrow">
        <div class="content">johndoelaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
    <div class="divrow">
        <div class="content">alicelaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
    <div class="divrow">
        <div class="content">boblaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
</div>

.headrow{
    display:table-row;
}