1

I'm trying to build a table from scratch with flexbox, and I want to implement rowspan and colspan with the property flex. But it doesn't work, I because the border, even when border-box is set

My result is:

enter image description here

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

A plnkr to my problem

I saw this question flex-box box-sizing: border-box not working and this one ( and many others ) but they aren't quite my specific problem. ( Just in case this is a component on angular shouldn't matter but could).

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • why don't you use table tag? – kyun Aug 10 '17 at 08:29
  • @YoungKyunJin I have problems with style with angular, https://stackoverflow.com/questions/45595659/html-table-in-conflict-with-angular-component-header-and-component-body/45596300?noredirect=1#comment78152273_45596300 –  Aug 10 '17 at 08:36
  • 1
    2
    3
     – Vega Aug 10 '17 at 08:52
  • 1
    @Vega it's no suppose to be like that. If an item1 has flex:2, and the others have flex:1. It should distribute proportionally. I can hack ass well for an specific case, but if the border changes. The hack will break. So I tried borderbox but seems not to work. At least in chrome. –  Aug 10 '17 at 09:04
  • @Vega when editing it had an space in front. Is fixed now –  Aug 10 '17 at 09:40
  • :border-box will not help, it's for individual cells and not for the row, and I am fairly sure that you don't have any other solution than set a margin to correct the border width – Vega Aug 10 '17 at 10:30
  • 1
    The problem is you're using `flex-grow`. You need to use `flex-basis`. http://plnkr.co/edit/okYkmEbGoRSDrwLXs3QR?p=preview – Michael Benjamin Aug 10 '17 at 14:52
  • @Michael_B I believe is not the same problem, I wouldn't mark as duplicate. Because if you look to the answer with more vote, and the complete answer, you will suggest that if the margin is 0 it will fix the problem. A thing that is incorrect here. You can try in the plnkr. And with respect to your plnkr, the values should be 66.7 and 16.65 for the others. Because the sum should be 100%. Change the plnkr. in any case I believe it must exist a better solution.( width could do the same fix ) – titusfx Aug 11 '17 at 07:05

1 Answers1

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

Where 2px is the double of your border width. Plunker

Vega
  • 27,856
  • 27
  • 95
  • 103