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 Y 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 に答える