javascript - 向有页脚的表格添加滚动条
问题描述
我是网络开发的新手。我正在使用反应 js 。这里我有一张桌子
就像,
现在,我的代码是 ->
import React from 'react';
import { connect } from 'react-redux';
import { Table } from 'react-bootstrap';
import './Jobs.css';
class UserJobs extends React.Component {
constructor(props) {
super(props);
console.log("props are ==>", props.jdRecords);
this.state = {
jdRecords: props.jdRecords
}
}
render() {
const compName = {
fontSize: '14px'
};
return (
<div className="container-fluid">
<div className="row">
<Table striped condensed hover>
<thead>
<tr>
<th>Sr.No.</th>
<th>Company Name</th>
<th>Technology</th>
<th>Job Title</th>
<th>Total Score</th>
<th>Average Score</th>
</tr>
</thead>
<tbody>{this.props.jobData.map(function (item, key) {
return (
<tr key={key}>
<td><b style={compName}>{item.id}</b></td>
<td><b style={compName}>{item.attributes.companyName}</b></td>
<td>abc Developer</td>
<td>{item.attributes.name}</td>
<td>30</td>
<td>30</td>
</tr>
)
})}</tbody>
</Table>
<footer>
footer
</footer>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
jobDescription: state.JobDescriptionData,
jobData: state.JobDescriptionData.jobData.data
}
}
export default connect(mapStateToProps, null)(UserJobs);
现在,这里,这个表有10多个条目。现在,我只想让滚动条到那个表而不是整个页面,而且它还有一个页脚。
So, I tried :
height : 200px;
overflow-y : auto
但这不起作用。
因为它也有一个导航栏。
任何人都可以给我一些提示吗?
解决方案
您需要div
表格的包装器并添加max-height as 200, overflow :auto.
推荐阅读
- php - 如何在 uwamp 服务器的 php 7.3+ 中启用 curl
- python - 如何使用beautifulsoup 获取所有数据?
- javascript - req.session.cart [object object] [object object] 如何在我的 sapper/svelte 应用程序中迭代和查看它
- python - 禁用在 for loop tkinter 中创建的按钮
- apache-kafka - spring应用中使用confluent schema registry和avro serializer,json数据输入怎么做
- .net - 链接配置未生效
- google-drive-api - pydrive: RedirectMissingLocation: 重定向但响应缺少 Location: 标头
- ios - Onesignal OSNotificationPayload 作为 userInfo 有效负载?
- xml - 为节点值解析多个 .XML 文件
- python - 添加列表并计算 Y 和 X 对象计数两个类别中的两个对象