Question

我使用DIV控件编写了表格结构。仅当列值具有相同的字符长度时，它才会显示正确的数据。如果列值具有不同的字符数，则列会自动放大以容纳列中的所有字符。如何设置每列DIV的FIX宽度？

我有以下HTML DIV结构：

<body>
  <div class="ParentContainer">
    <div id="row1" class="row">
        <div>
            <label id="row1_to" class="divLabel">contact1@test.com
            </label>
        </div>
        <div>
            <label id="row1_from" class="fromLabel">test1@something.com
            </label>
        </div>
        <div>
            <label id="row1_subject" class="subLabel">Need to create new organization1
            </label>
        </div>
    </div>
    <div id="row2" class="row">
        <div>
            <label id="row2_to" class="divLabel">contact2@test.com
            </label>
        </div>
        <div>
            <label id="row2_from" class="fromLabel">test2@something.com
            </label>
        </div>
        <div>
            <label id="row2_subject" class="subLabel">Need to create new organization2
            </label>
        </div>

    </div>
  </div>
</body>

以下是CSS：

.ParentContainer
{
margin: 0 auto; 
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
}
.row > div
{
display: inline-block;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
    background-color: #CEE3F6;
}
.fromLabel
{
    position: relative;
    left: 64px;
}
.subLabel
{
    position: relative;
    left: 120px;
}

请建议。

Answer 1

您忘记将div标记为table：

相关CSS ：

.ParentContainer {
    display: table;
    ...
}
.row {
    display: table-row;
    ...
}
.row > div {
    display: table-cell;
    ...
}

演示：http://jsfiddle.net/abhitalks/824hw/1/

Answer 2

将div显示为表格单元格并为表格单元格指定宽度。删除标签的位置相对属性。

如下更新您的CSS。

.ParentContainer
{
margin: 0 auto; 
width: 960px;
table-layout:fixed;
}
.row
{
background-color: #FFFFFF;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-color: #CFD4DA;
font-size: 12px;
display:table-row;
}
.row > div
{
display: table-cell;
width:33%;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
.rowSelected
{
background-color: #CEE3F6;
}
.fromLabel, .subLabel, .divLabel
{
  text-align:left;
}

JSFIDDLE DEMO

设置每个Column DIV Control的固定宽度

2 个答案: