Here's what I attempted:
http://codepen.io/helloworld/pen/BcjCJ
I aim for each column to have the same width as the column header visually.
Currently, a slight difference in width exists between the column header and the actual column. Refer to the pen for details.
What is causing this "space" that makes the column header slightly wider?
UPDATE
I've discovered that text is responsible for creating scrollbars on the table.
Is there a way to include this scrollbar size in the first column header's width without resorting to JavaScript, perhaps by leveraging a smart CSS3/SASS function like calc() or similar?
I can't identify any erroneous padding/margin.
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">11111111111... </div>
<div class="row">22222222222... </div>
</div>
<!-- Tuesday Column-->
<div style="background:green;" class="column">
<!-- ko: foreach-->
<div class="row">fsadffsfsfsd ... sad</div>
<div class="row">fsadffsfsfsd ... ad</div>
</div>
</div>
CSS
.columnHeader{
border:1px solid red;
background:yellow;
}
.columnHeader, .column{
-webkit-box-flex: 1;
/* This ensures uniform header width regardless of content */
width:100%;
font-weight:bold;
font-size:1.2em;
}
#gridHeader{
display: flex; /* current version */
/* Ensures uniform column width irrespective of content */
width:100%;
align-items: center;
text-align: center;
position:fixed;
top:0px;
left:0px;
height:50px;
background:gray;
}
#gridContent{
display: -webkit-box;
/* Ensures uniform column width irrespective of content */
width:100%;
position:fixed;
top:50px;
left:0px;
bottom:0px;
overflow-y:auto;
overflow-x:hidden;
}
*{
box-sizing:border-box;
}
.row{
height:200px;
overflow-y:auto;
overflow-x:hidden;
border:1px solid blue;
background:orange;
}