0

CSS：

div {
    border:1px solid;
}
.divtable {
    display:table;
}
.divrow {
    display:table-row;
}
.divcol {
    display:table-cell;
    width:100px;
}
.headrow {
    display:table-caption;
}
.content {
    display:table-cell;
    width:100px;
}

html:

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

有人可以向我解释一下如何让每列正确排列，以使第 1 行第 2 列不会溢出到第 2 行第 2 行。

例如：

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

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

4

1 回答 1

0

不要table-caption用于您的标题行。这是一行，使用table-row：

.headrow{
    display:table-row;
}

http://jsfiddle.net/jLGyF/

于 2013-10-22T17:02:15.440 回答