Выравнивание столбцов в таблице DIV

Question

Выравнивание столбцов в таблице DIV

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 Row2 не разливался в строке 2 столбца2.

Например:

Имя хоста IP-адрес Подтвержденная дата Открыт выбор

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

C Dubya 22 окт. 2013, в 19:18

Источник

2

У вас есть CSS, который вы здесь не отображаете?
Christian Ternus 22 окт. 2013, в 16:43
2

Если это таблица, почему бы не использовать <table> ?
T I 22 окт. 2013, в 16:46
0

Извините забыл добавить CSS .....
C Dubya 22 окт. 2013, в 16:54
0

Я читал, что вы не можете установить предел для div при использовании таблицы ... поэтому, если моя таблица заполняется динамически, div будет продолжать расти бесконечно. Это было мое понимание.
C Dubya 22 окт. 2013, в 16:59

Показать ещё 2 комментария

Теги:

html

css-tables

table

1 ответ

Ещё вопросы

У вас есть CSS, который вы здесь не отображаете?
Если это таблица, почему бы не использовать <table> ?
Я читал, что вы не можете установить предел для div при использовании таблицы ... поэтому, если моя таблица заполняется динамически, div будет продолжать расти бесконечно. Это было мое понимание.

James Montagne · Accepted Answer · 2013-10-22T15-41-00.000Z

Не используйте table-caption для строки заголовка. Это строка, используйте table-row:

.headrow{
    display:table-row;
}

http://jsfiddle.net/jLGyF/