Question

我需要用overflow-x创建一个水平框我需要做的事情是这样的：

.table {
    white-space: nowrap;
    overflow-x: auto;
}

.table .row {
    border-bottom: 1px solid grey;
}

.cursor-pointer {
    cursor: pointer;
}

.row .data-column {
    padding: 15px 5px;
    border-right: 2px solid grey;
    line-height: 5px;
    border-radius: 5px;
}

.col-xsm {
    width: 25%;
    display: inline-block;
}

.body .row:nth-of-type(even) {
  background: blue;
}

<div class="table">
   <div class="heading">
      <div class="row">
         <div class="col-xsm data-column"><span>Id</span></div>
         <div class="col-xsm data-column"><span>Active</span></div>
         <div class="col-xsm data-column"><span>Balance</span></div>
         <div class="col-xsm data-column"><span>Age</span></div>
         <div class="col-xsm data-column"><span>Eye Color</span></div>
         <div class="col-xsm data-column"><span>Name</span></div>
         <div class="col-xsm data-column"><span>Gender</span></div>
      </div>
   </div>
   <div class="filter-row">
      <div class="row">
         <div class="col-xsm data-column"><input type="text" name="filter-id"></div>
         <div class="col-xsm data-column"><input type="text" name="filter-isActive"></div>
         <div class="col-xsm data-column"><input type="text" class="visibility-hidden"></div>
         <div class="col-xsm data-column"><input type="text" name="filter-age"></div>
         <div class="col-xsm data-column"><input type="text" name="filter-eyeColor"></div>
         <div class="col-xsm data-column"><input type="text" name="filter-name"></div>
         <div class="col-xsm data-column"><input type="text" name="filter-gender"></div>
      </div>
   </div>
   <div class="body">
      <div class="cursor-pointer row" role="button" tabindex="0">
         <div class="col-xsm data-column false"><span>5eb99b22580edaed08109c1a</span></div>
         <div class="col-xsm data-column false"><span></span></div>
         <div class="col-xsm data-column false"><span>$2,928.72</span></div>
         <div class="col-xsm data-column false"><span>40</span></div>
         <div class="col-xsm data-column false"><span>blue</span></div>
         <div class="col-xsm data-column false"><span>Glass Day</span></div>
         <div class="col-xsm data-column false"><span>male</span></div>
      </div>
      <div class="cursor-pointer row" role="button" tabindex="0">
         <div class="col-xsm data-column false"><span>5eb99b2230bbbe9d0b2d0e7a</span></div>
         <div class="col-xsm data-column false"><span></span></div>
         <div class="col-xsm data-column false"><span>$2,358.71</span></div>
         <div class="col-xsm data-column false"><span>25</span></div>
         <div class="col-xsm data-column false"><span>blue</span></div>
         <div class="col-xsm data-column false"><span>Monique Doyle</span></div>
         <div class="col-xsm data-column false"><span>female</span></div>
      </div>
   </div>
</div>

我面临的问题是，背景色不会填满整个行，而只会填满直到开始溢出为止。我曾经尝试过使用Flexbox，但是我只收到了使用flex作为容器和内部元素的帖子，我的意思是，如果选择这种方式，则每个表行必须设置1个滚动。

Answer 1

如果知道列数，则可以使用inline-flex;考虑以下配置。您可以将列数作为CSS变量轻松调整它：

.table {
  overflow-x: auto;
}

.table .row {
  border-bottom: 1px solid grey;
  display: inline-flex;
  width: calc(25% * var(--c)); /* each column 25% */
}

.cursor-pointer {
  cursor: pointer;
}

.row .data-column {
  padding: 15px 5px;
  border-right: 2px solid grey;
  line-height: 5px;
  border-radius: 5px;
}

.col-xsm {
  flex: 1; /* all the column equal*/
  min-width: 0; /* allow the to shrink so they stay equal */
}

.body .row:nth-of-type(even) {
  background: blue;
}

* {
  box-sizing: border-box;
}
 input {
   max-width:100%;
 }

<div class="table" style="--c:7">
  <div class="heading">
    <div class="row">
      <div class="col-xsm data-column"><span>Id</span></div>
      <div class="col-xsm data-column"><span>Active</span></div>
      <div class="col-xsm data-column"><span>Balance</span></div>
      <div class="col-xsm data-column"><span>Age</span></div>
      <div class="col-xsm data-column"><span>Eye Color</span></div>
      <div class="col-xsm data-column"><span>Name</span></div>
      <div class="col-xsm data-column"><span>Gender</span></div>
    </div>
  </div>
  <div class="filter-row">
    <div class="row">
      <div class="col-xsm data-column"><input type="text" name="filter-id"></div>
      <div class="col-xsm data-column"><input type="text" name="filter-isActive"></div>
      <div class="col-xsm data-column"><input type="text" class="visibility-hidden"></div>
      <div class="col-xsm data-column"><input type="text" name="filter-age"></div>
      <div class="col-xsm data-column"><input type="text" name="filter-eyeColor"></div>
      <div class="col-xsm data-column"><input type="text" name="filter-name"></div>
      <div class="col-xsm data-column"><input type="text" name="filter-gender"></div>
    </div>
  </div>
  <div class="body">
    <div class="cursor-pointer row" role="button" tabindex="0">
      <div class="col-xsm data-column false"><span>5eb99b22580edaed08109c1a</span></div>
      <div class="col-xsm data-column false"><span></span></div>
      <div class="col-xsm data-column false"><span>$2,928.72</span></div>
      <div class="col-xsm data-column false"><span>40</span></div>
      <div class="col-xsm data-column false"><span>blue</span></div>
      <div class="col-xsm data-column false"><span>Glass Day</span></div>
      <div class="col-xsm data-column false"><span>male</span></div>
    </div>
    <div class="cursor-pointer row" role="button" tabindex="0">
      <div class="col-xsm data-column false"><span>5eb99b2230bbbe9d0b2d0e7a</span></div>
      <div class="col-xsm data-column false"><span></span></div>
      <div class="col-xsm data-column false"><span>$2,358.71</span></div>
      <div class="col-xsm data-column false"><span>25</span></div>
      <div class="col-xsm data-column false"><span>blue</span></div>
      <div class="col-xsm data-column false"><span>Monique Doyle</span></div>
      <div class="col-xsm data-column false"><span>female</span></div>
    </div>
  </div>
</div>

创建内部包含容器的水平滚动并为其涂上背景色

1 个答案: