Add a scrollbar to the table which is having a footer

Question

I am new to web development. I am using react js . Here I have a table

which is like ,

Now, my code is ->

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);

Now , Here, This table has more than 10 entries. Now, I want to have the scrollbar to that table only and not to the whole page , and also it has a footer.

So, I tried :

height : 200px;
overflow-y : auto

But this is not working .

because it it has a navigation bar as well.

Can any one give me some hint ?

score 0 · Answer 1 · answered Aug 21 '18 at 13:36

0

You need a wrapper div for the table and add max-height as 200, overflow :auto.

answered Aug 21 '18 at 13:36

pixellab

588
3
12

Tried this but Header is not fixed. – ganesh kaspate Aug 21 '18 at 13:40
if you want the header fixed you need to create 2 header like:https://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque – pixellab Aug 21 '18 at 13:45

Add a scrollbar to the table which is having a footer

1 Answers1