Question

我打算使用table元素构建div。但是，我尝试使用colspan属性table和percentage，但它没有用。

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

然后，我尝试使用下面的代码，但它与px的效果非常好，而%则没有任何变化。请将我的原型视为上图，看看我需要实现的目标。

要测试的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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何＆＃34; colspan＆＃34; div表与百分比

1 个答案: