javascript - float 和非 float div 之间的 1px 边界

Question

目标是创建具有缩进行的网格，其中最后一个单元格填充到页面的右侧，每个单元格周围有 1 像素的边框。

下面的尝试中的问题是行的最后一个单元格的边框扩展了整个页面宽度，从而在缩进周围创建了不需要的边框。这看起来很奇怪，因为 div 内容正确对齐。

http://jsfiddle.net/woqpq508/1/

    <style>
        .table {
            border-collapse:collapse;
        }
        .row {
        }
        .indent {
            min-width: 20px;
            float: left;
        }
        .cell {
            border-style: solid;
            border-width: 1px;
            margin-left: -1px;
            margin-bottom: -1px;
            float: left;
        }
        .lastcell {
            float: none;    
        }           
    </style>

    <div class="table">
        <div class="row">
            <div class="cell">x</div>
            <div class="cell">y</div>
            <div class="cell">zzz</div>
            <div class="cell lastcell" contenteditable="true">long text</div>
        </div>
        <div class="row">
            <div class="indent">&nbsp;</div>
            <div class="cell">x</div>
            <div class="cell">y</div>
            <div class="cell">zzz</div>
            <div class="cell lastcell" contenteditable="true">long text</div>
        </div>
        <div class="row">
            <div class="cell">x</div>
            <div class="cell">y</div>
            <div class="cell">zzz</div>
            <div class="cell lastcell" contenteditable="true">long text</div>
        </div>
    </div>

Answer 1

正如评论中所说，您可以使用 display:table/table-cell 实现您想要的。

.table {
  border-collapse: collapse;
  display: table;
  width: 100%;
}
.row {
  margin-bottom: -1px;
}
.indent {
  min-width: 20px;
  display: table-cell;
}
.cell {
  border-style: solid;
  border-width: 1px;
  display: table-cell;
}
.lastcell {
  width: 100%;
}

<div class="table">
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">y</div>
    <div class="cell">zzz</div>
    <div class="cell lastcell" contenteditable="true">long text</div>
  </div>
  <div class="row">
    <div class="indent">&nbsp;</div>
    <div class="cell">x</div>
    <div class="cell">y</div>
    <div class="cell">zzz</div>
    <div class="cell lastcell" contenteditable="true">long text</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">y</div>
    <div class="cell">zzz</div>
    <div class="cell lastcell" contenteditable="true">long text</div>
  </div>
</div>

Fiddle from your comment