2

I want to set the header of , (not for div header) from React-bootstrap while using making it vertically and horizontally scrollable.

I have tried to make it work by using display: block but it's messing up table in responsive mode.

render() {
    return (
      <div className="padding-top-16" id="maximise" >
        {this.renderActionItems()}
        <div className={'col-xs-12'} style={{ marginTop: '16px', marginBottom: '16px' }}>
          <Table hover responsive>
            <thead>
              {this.renderHeaders()}
            </thead>
            <tbody>
              {this.renderRows()}
            </tbody>
          </Table>
        </div>
      </div>
    );
  }
}

.table-responsive {
  max-height: 550px;
  border: 1px solid var(--colorInputBorder);
  color: var(--colorDarkPrimary);
  border-radius: 5px;
}

.table-responsive td,
.table-responsive th {
  white-space: nowrap;
  padding: 8px 20px !important;
}

This is what i have done to make the table vertically and horizontally scrollable and it's working fine but the header is not fixed.

NOTE: As i have used react-bootstrap the class named responsive adds extra <div> outside of <Table> with class name table-responsive

I DO NOT WANT TO MAKE IT WORK BY SETTING WIDTH MANUALLY

Dhara Vihol
  • 602
  • 5
  • 26
  • Try this : **[HTML Table with Fixed Headers](https://stackoverflow.com/questions/673153/html-table-with-fixed-headers)** – Varun Nair Apr 05 '19 at 10:55
  • 3
    If you are using a pre-build react-table component, then they should be having options for fixed headed tables. Otherwise, you could just go for a regular table header fix, which works irrespective of bootstrap or ReactJS inclusions – Varun Nair Apr 05 '19 at 10:57
  • Yes @VarunNair, I have checked it but React-bootstrap does not provide such facility. It's already using bootstrap 3 as a base. – Dhara Vihol Apr 05 '19 at 11:00
  • @DharaVihol, then you could try a simple fixed/ sticky header fix. Refer to the posts mentioned in the comments above. – Varun Nair Apr 05 '19 at 11:01
  • Yes, I have tried it but while i use display: block it becomes messy as i have mentioned in question. @VarunNair – Dhara Vihol Apr 05 '19 at 11:02
  • I think it's different @iLuvLogix. I am looking for a solution for table header.. https://stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down So, this may not work.. – Dhara Vihol Apr 05 '19 at 11:04
  • 1
    You don't have to change the '*display*' property of the table. Try working with the '***position***' property for the header. Go through those posts. You'll find the solution there. – Varun Nair Apr 05 '19 at 11:05
  • 1
    Cool! Thanks @VarunNair. I will try and let you know if it works.. – Dhara Vihol Apr 05 '19 at 11:06

0 Answers0