html - 如何用百分比将 "colspan"div表

Question

我正准备用 div 元素构建一个 table。但是，我尝试使用 colspan 属性，例如 table 和 percentage，但它没有用。

这是我的FIDDLE:https://jsfiddle.net/xpvt214o/113040/

然后，我尝试使用下面的代码，但它与 px 一起工作得很好，而与 % 一起，没有任何变化。请将我的原型(prototype)视为上图，以了解我需要实现的目标。

要测试的 CSS:

div.colspan,
div.colspan + div.cell {
    border: 0;
}

div.colspan > div {
    width: 1px;
}

div.colspan > div > span {
    position: relative;
    width: 99px; /* work OK with 99px but not work with 50% (colspan to 2nd column) */
    overflow: hidden;
}

完整代码:

HTML

<div class="table" id="info">
  <div class="tableRow">
    <div class="tableCell col25">
      <span>Title1</span>
    </div>
    <div class="tableCell col25">
      <span>Title2</span>
    </div>
    <div class="tableCell col25">
      <span>Title3</span>
    </div>
    <div class="tableCell col25">
      <span>Title4</span>
    </div>
  </div>
  <div class="tableRow">
    <div class="tableCell col25 colspan">
      <span>Test123456789Test123456789Test123456789</span>
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25 right">
      <span>TestABC987654321TestABC987654321</span>
    </div>
  </div>
  <div class="tableRow">
    <div class="tableCell col25">
      <span>DEFTest123456789Test123456789</span>
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25 right">
      <span>Test2TestABC987654321TestABC987654321</span>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
  border-collapse: collapse;
}

.tableRow {
  display: table-row;
}

.tableCell {
  display: table-cell;
}

#info.table {
  width: 100%;
}

.tableCell.col25 {
  width: 25%;
}

.tableCell.col50 {
  width: 50%;
}

#info {
  border: 1px solid #cccccc;
}

#info .tableCell.col25 {
  height: 30px;
  line-height: 18px;
  font-family: 'Roboto Light', 'Roboto Regular', 'Roboto';
  font-weight: 300;
  font-size: 14px;
  color: #666666;
}

#info .tableCell.col25.right {
  text-align: right;
}

Answer 1

唯一的薄就是决定如何处理长词。我在 tableCell 上使用了 word-break。您可能更喜欢使用 overflow:scroll 或其他一些解决方案来处理长单词:

.table {
  display: table;
  border-collapse: collapse;
}

.tableRow {
  display: table-row;
}

.tableCell {
  display: table-cell;
  word-break: break-all;
}

#info.table {
  width: 100%;
}

.tableCell.col25 {
  width: 25%;
}

.tableCell.col50 {
  width: 50%;
}

#info {
  border: 1px solid #cccccc;
}

#info .tableCell.col25 {
  height: 30px;
  line-height: 18px;
  font-family: 'Roboto Light', 'Roboto Regular', 'Roboto';
  font-weight: 300;
  font-size: 14px;
  color: #666666;
}

#info .tableCell.col25.right {
  text-align: right;
}

<div class="table" id="info">
  <div class="tableRow">
    <div class="tableCell col25">
      <span>Title1</span>
    </div>
    <div class="tableCell col25">
      <span>Title2</span>
    </div>
    <div class="tableCell col25">
      <span>Title3</span>
    </div>
    <div class="tableCell col25">
      <span>Title4</span>
    </div>
  </div>
  <div class="tableRow">
    <div class="tableCell col25 colspan">
      <span>Test123456789Test123456789Test123456789</span>
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25 right">
      <span>TestABC987654321TestABC987654321</span>
    </div>
  </div>
  <div class="tableRow">
    <div class="tableCell col25">
      <span>DEFTest123456789Test123456789</span>
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25">
      &nbsp;
    </div>
    <div class="tableCell col25 right">
      <span>Test2TestABC987654321TestABC987654321</span>
    </div>
  </div>
</div>