1

我正在尝试使用 flexbox 从头开始​​构建一个表，并且我想使用属性 flex 实现 rowspan 和 colspan。但这不起作用，我是因为边框，即使设置了边框框

我的结果是：

在此处输入图像描述

/* Styles go here */

*{
  box-sizing: border-box;
}

.table{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.table > caption{
  align-self: flex-end;
}
.row, .header{
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
}

.header{
  font-weight: bold;

}

.header > .col{
  justify-content: center;
}

.col{
  display: flex;
  width: 100%;
  border: 1px solid black;
  flex: 1;
}

.row > .col{
  justify-content: flex-end;
}
    <div class="table">
  <caption>Im a title</caption>
  <div class="header">
    <div class="col">Number 1</div>
    <div class="col">Number 2</div>
    <div class="col">Number 3</div>
  </div>
  <div class="row">
    <div class="col" style="flex:2;">1</div>
    <div class="col" style="flex:0.5;">2</div>
    <div class="col" style="flex:0.5;">3</div>
  </div>

  <div class="row">
    <div class="col">Yep should be</div>
    <div class="col">5</div>
    <div class="col">6</div>
  </div>

  <div class="row">
    <div class="col">7</div>
    <div class="col">this is a different</div>
    <div class="col">9</div>
  </div>
</div>

解决我的问题

我看到了这个问题flex-box box-sizing: border-box not working 和这个问题（以及许多其他问题），但它们并不是我的具体问题。（以防万一这是角度组件无关紧要，但可以）。

4

1 回答 1

0 
.col{
 ...
       margin: 0 -2px -2px 0;
...
}

其中 2px 是边框宽度的两倍。 普朗克

于 2017-08-10T09:19:37.997 回答