使 columnHeader 与 css 列一样宽

Question

这就是我尝试过的：

http://codepen.io/helloworld/pen/BcjCJ

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

目前列标题比列宽一点，请看笔。

使列标题比列宽一点的“空格”从何而来？

更新

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

是否可以通过巧妙的 css3/SASS 函数在不使用 javascript 的情况下将此滚动条大小添加到 FIRST 列标题宽度？ calc() 随便...

我无法发现任何错误的填充/边距。

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>

CSS

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

Answer 1

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

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