小编Ara*_*ddy的帖子

Flexbox类型固定标题,表格标记的可滚动内容

我正在使用一个数据表,我正在使用传统的表格标记,但我想要的是我的表从页面的某个地方开始,我希望我的表格标题在它开始的地方固定,并且表格主体应该通过删除其余页面来滚动高度
我在这里显示一个小例子

https://codepen.io/avreddy/pen/eyYBdB?editors=1100

.datatable{
  width: 50%;
  border-collapse: collapse;
}
td{
  text-align: center;
  border: 1px solid;
  padding:5px;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div class="somecontent">
    <h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
  </div>
  <table class="datatable">
    <thead>
      <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
        </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td> …
Run Code Online (Sandbox Code Playgroud)

html css html-table css3 flexbox

8
推荐指数
2
解决办法
1406
查看次数

使用 flexbox 的水平滚动 div 问题

我正在使用flexbox css制作一个带有多个 div 的容器来水平滚动,但问题是当我尝试向容器添加更多 div 时,它移动到左侧并且显示左侧的 div 被隐藏。

我不明白这里发生了什么是代码片段和代码


.scroll{
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 150px;
  margin: 10px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="scroll">
  <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)


谢谢

html css horizontal-scrolling flexbox

2
推荐指数
1
解决办法
3024
查看次数

标签 统计

css ×2

flexbox ×2

html ×2

css3 ×1

horizontal-scrolling ×1

html-table ×1