Question

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列Row2不会溢出到第2行第2行。

例如：

主机名IPAddress已确认发现的日期选择

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

Answer 1

不要将table-caption用于标题行。它是一行，使用table-row：

.headrow{
    display:table-row;
}

http://jsfiddle.net/jLGyF/

对齐DIV表中的列

1 个答案: