Html 使columnHeader与css列一样宽

这就是我所尝试的：

我希望每一列在视觉上都与列标题具有相同的宽度

目前，一个列标题比一个列宽一点，只要看看钢笔就可以了

这个使列标题比列标题宽一点的“空格”是从哪里来的

更新

刚刚发现在“表”上创建滚动条的文本

是否可以通过一个聪明的css3/SASS函数，在不使用javascript的情况下将这个滚动条大小添加到第一列标题宽度？不管怎样

我看不出有什么不好的填充/边距

HTML

<div id="gridHeader">     
      <div class="columnHeader">Monday</div>
      <div class="columnHeader">Tuesday</div>        
  </div>
  <div id="gridContent">

    <!-- Monday Column-->
    <div style="background:lightblue;" class="column">
      <!-- ko: foreach-->    
      <div class="row">1111111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 111111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 1111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 111111111111111 1111111111111</div>

      <div class="row">2222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 22222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222</div>
    </div>

    <!-- Tuesday Column-->
    <div style="background:green;" class="column">
        <!-- ko: foreach-->
      <div class="row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadfffsadffsfsfsd   fsdsfdfsdfsadfsadfsadffsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd  dffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div>
      <div class="row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div>
    </div>

  </div>

---

要解决这个问题，需要从#gridContent和.row类中删除overflow-x和overflow-y

滚动条使它们看起来不对齐

.columnHeader{
  border:1px solid red;
  background:yellow;
}

.columnHeader, .column{
  -webkit-box-flex: 1;

  /* This causes that all headers have the same width independently from their content */
  width:100%;  
  font-weight:bold;
  font-size:1.2em;

}

#gridHeader{  
  display: flex; /* current version */
 /* This causes that all columns have the same width independently from their content */  
  width:100%;  
  align-items: center;
  text-align: center;  
  position:fixed;
  top:0px;
  left:0px;
  height:50px;  
  background:gray;
}

#gridContent{  
  display: -webkit-box;
 /* This causes that all columns have the same width independently from their content */
  width:100%; 
  position:fixed;
  top:50px;
  left:0px; 
  bottom:0px;
  overflow-y:auto;
  overflow-x:hidden;
}

*{ 
  box-sizing:border-box;
}
.row{
  height:200px;  /* fix this with flex that the equal height is taken*/

  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid blue;
  background:orange;
}