Question

我是Web开发的新手。我正在使用react 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

但这不起作用。

因为它也有一个导航栏。

有人可以给我一些提示吗？

Answer 1

您需要为表包装Traceback (most recent call last): File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\runpy.py", line 193, in _run_module_as_main "__main__", mod_spec) File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\runpy.py", line 85, i n _run_code exec(code, run_globals) File "C:\Users\Sztaki_user\Anaconda3\envs\tensorflow\Scripts\tensorboard.exe\_ _main__.py", line 5, in <module> File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\site-packages\tensorb oard\main.py", line 40, in <module> from tensorboard import default File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\site-packages\tensorb oard\default.py", line 37, in <module> from tensorboard.plugins.audio import audio_plugin File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\site-packages\tensorb oard\plugins\audio\audio_plugin.py", line 30, in <module> from tensorboard.plugins.audio import metadata File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\site-packages\tensorb oard\plugins\audio\metadata.py", line 22, in <module> from tensorboard.plugins.audio import plugin_data_pb2 File "c:\users\sztaki_user\anaconda3\envs\tensorflow\lib\site-packages\tensorb oard\plugins\audio\plugin_data_pb2.py", line 22, in <module> serialized_pb=_b('\n+tensorboard/plugins/audio/plugin_data.proto\x12\x0btens orboard\"}\n\x0f\x41udioPluginData\x12\x0f\n\x07version\x18\x01 \x01(\x05\x12\x3 7\n\x08\x65ncoding\x18\x02 \x01(\x0e\x32%.tensorboard.AudioPluginData.Encoding\" \n\x08\x45ncoding\x12\x0b\n\x07UNKNOWN\x10\x00\x12\x07\n\x03WAV\x10\x0b\x62\x06 proto3') TypeError: __init__() got an unexpected keyword argument 'serialized_options'并添加div

将滚动条添加到具有页脚的表中

1 个答案: