Question

我在反应应用程序中使用bootstrap表。但是这个表现在不能滚动。每当内容加载到其中时，它会增加高度以容纳内容。我想让我可滚动。这是我的表组件

<div className='flex-vertical'>
                <Table className='flags-table' responsive hover>
                    <thead>
                    <tr>
                        <th></th>
                        <th> Time In</th>
                        <th> Time Out</th>
                        <th> Type</th>
                        <th> Category</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        that.props.tag_fetch_reducer.tags.map((x, i) => (
                            <tr key={i} onClick={this.handleRowClick.bind(this, i)}>
                                <td>
                                    <div className='red-box'></div>
                                </td>
                                <td> {this.secondsToHms(x.time)} </td>
                                <td> {this.secondsToHms(x.stopTime)} </td>
                                <td> {x.tagname} </td>
                                <td contentEditable="false"> {x.category}</td>
                            </tr>
                        ))
                    }
                    </tbody>
                </Table>

这是这个代码的手写笔部分

.flex-vertical
    display flex
    flex-direction column
    height 100%

.flags-table
    .red-box
      width 16px
      height 16px
      margin 3px 5px
      background-color red

从评论中实施解决方案后，我得到了这个

我做了这个

.flex-vertical
    display flex
    flex-direction column
    height 100%
Table ,tr td{

}
tbody {
  display:block;
  height:50px;
  overflow:auto;
}
thead, tbody tr {
  display:table;
  width:100%;
  table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
  width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

Answer 1

这是flex的一个示例：（http://codepen.io/gc-nomade/pen/zNyOpr）

html,
body,
.flex-vertical {
  height: 100%;
  margin: 0;
}
.flex-vertical {
  display: flex;
  flex-flow: column;
}
.flags-table {
  display: flex;
  flex-flow: column;
  flex: 1;
  overflow: hidden;
}
tbody {
  overflow-y: scroll;
  background: turquoise
}
.red-box {
  width: 16px;
  height: 16px;
  margin: 3px 5px;
  background-color: red;
  margin: auto;
}
thead {
  display: block;
  margin-right: 1.075em;
  flex-shrink: 0;
  background: tomato;
}
tr {
  display: flex;
  width: 100%;
}
th,
td {
  border: 1px solid;
  min-width: 25px;
  display: flex;
}
th ~th,
td ~td {
  display: table-cell;
  flex: 1 1 22%;
  margin: 1px;
  word-wrap: break-word;
}
h1,
footer {
  margin: 1px;
  padding: 5px;
  background: orange
}

<div class='flex-vertical'>
  <h1>test</h1>
  <Table class='flags-table' responsive hover>
    <thead>
      <tr>
        <th></th>
        <th>Time In</th>
        <th>Time Out</th>
        <th>Type</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
      <tr>
        <td>
          <div class='red-box'></div>
        </td>
        <td>{this.secondsToHms(x.time)}</td>
        <td>{this.secondsToHms(x.stopTime)}</td>
        <td>{x.tagname}</td>
        <td contentEditable="false">{x.category}</td>
      </tr>
    </tbody>
  </Table>
  <footer>
    footer
    </footer

受到How to set tbody height with overflow scroll：和How can I make my flexbox layout take 100% vertical space?

的启发

修改

如果你是flexstrap的flex版本，那么你也可以使用类

html, body, .flex-vertical { display:flex; flex-direction:column; height: 100%; } .flags-table { flex: 1; overflow: hidden; } tbody { flex:1; overflow-y: scroll; background: turquoise } .red-box { width: 16px; height: 16px; margin: 3px 5px; background-color: red; margin: auto; } thead { display: block; margin-right: 1.075em; flex-shrink: 0; background: tomato; } tr { width: 100%; } th, td { border: 1px solid; min-width: 25px; display: flex; } th ~th, td ~td { display: table-cell; flex: 1 1 22%; margin: 1px; word-wrap: break-word; } h1, footer { margin: 1px; padding: 5px; background: orange }

<link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class='flex-vertical'> <h1>test</h1> <Table class='flags-table flex-vertical' responsive hover> <thead> <tr class="d-flex"> <th></th> <th>Time In</th> <th>Time Out</th> <th>Type</th> <th>Category</th> </tr> </thead> <tbody> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> <tr class="d-flex"> <td> <div class='red-box'></div> </td> <td>{this.secondsToHms(x.time)}</td> <td>{this.secondsToHms(x.stopTime)}</td> <td>{x.tagname}</td> <td contentEditable="false">{x.category}</td> </tr> </tbody> </Table> <footer> footer </footer

使表可滚动

1 个答案: