Question

这就是我的尝试：

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

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

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

从哪里开始＃34;空间＆＃34;这使得列标题比列宽一点？

更新

刚刚找到了在＆＃34;表＆＃34;

上创建滚动条的文本

是否可以将此滚动条大小添加到FIRST列标题宽度而不使用javascript，可能是通过聪明的css3 / SASS函数？ 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。

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

使columnHeader与css列一样宽

1 个答案: