How to Set React-Bootstrap Table Row Height and Padding

It can be useful to custom style Bootstrap Table rows with extra height or padding. However, there are some styling challenges with HTML tables (and Bootstrap tables) that make it difficult to know how to add styling and yet let the table have a responsive height.

In this tutorial, we will create the following table that has plenty of padding and height on the rows:

React-Bootstrap Table Row Height and Padding Tutorial
React-Bootstrap Table Row Height and Padding Tutorial

However, to get the look of padding on the rows, I actually had to strategically apply padding at the cell level. Read on to learn how.

Here are the React-Bootstrap Table Docs. The Resources section has full code for this tutorial.

Default React-Bootstrap Table Row Height and Padding

React-Bootstrap table rows do not directly have any special padding or height by default. They take their height from the content height and will dynamically resize.

React-Bootstrap Table Row Height and Padding DOM
React-Bootstrap Table Row Height and Padding DOM

The table cells do have padding. As we can see from the styles section below, this padding is applied through a combination of selecting the .table class (applied to the React-Bootstrap table by default) and selecting the appropriate level of nested child.

React-Bootstrap Table Cell Height and Padding
React-Bootstrap Table Cell Height and Padding

The padding is added at the cell level because tr elements by default have display: table-row applied. This styling does not acknowledge padding.

Another important point is that tr elements by CSS default don’t acknowledge min-height. However, they do accept height. Also, if a height value is applied and the row contents wrap, the row will expand vertically beyond the given height. In other words, height acts like min-height which is good for dynamic sizing.

Read this if you also need to change table ‘column’ width.

How to Change React-Bootstrap Table Row Height

We want our table row to be responsive to wrapped content height. However, table rows don’t use the min-height property. Instead, add a height value like height: 100px. If the tr needs more vertical room it will expand beyond the height value you set.

//css
.row-height {
  height: 5rem !important;
}

//jsx
<tr key={index} className="row-height">

If you don’t want the row to grow beyond your specified height value, add white-space: nowrap at the row or cell level.

MUI Table component height is also controlled via classes.

How to Change React-Bootstrap Table Row Padding

The display: table-row styling prevents padding from being added to the row. Padding must be added at the cell level but I want to imitate row padding. This means I need to only add padding top and bottom on most cells, and padding left on the first cell and padding right on the last cell.

Here are the classes I created to accomplish this:

.table .cell-padding {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.table .cell-padding-right {
  padding-right: 1rem;
}

.table .cell-padding-left {
  padding-left: 1rem;
}

.table>:not(caption)>*>* {
  padding: 0px;
}

I had to remove the default padding applied by the table class selector, otherwise the cells kept left and right padding that I didn’t want.

Here’s how the classes were applied:

<tbody>
  {addresses.map((address, index) => {
    return (
      <tr key={index} className="row-height nowrap">
        <td className="cell-padding cell-padding-left">1</td>
        <td className="cell-padding">{address.address}</td>
        <td className="cell-padding">{address.zip}</td>
        <td className="cell-padding">{address.city}</td>
        <td className="cell-padding cell-padding-right">{address.state}</td>
      </tr>
    );
  })}
</tbody>

I used my array of data to loop and create my table rows and cells. I added classes to the appropriate table cells to account for left and right padding.

Here’s an example inner cell that only has top and bottom padding:

Bootstrap table cell padding
Bootstrap table cell padding

We can change table row colors with a few custom classes and selectors.

Resources

Here’s a deeper dive into table row onClick in React (great for Bootstrap tables).

Below is the full code for this tutorial. Notice how I use rems, which recommended by the Bootstrap RFS system.

//TableStyles.css
.row-height {
  height: 5rem !important;
}

.nowrap {
  white-space: nowrap;
}

.table .cell-padding {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.table .cell-padding-right {
  padding-right: 1rem;
}

.table .cell-padding-left {
  padding-left: 1rem;
}

.table>:not(caption)>*>* {
  padding: 0px;
}

//CustomTableHeight.tsx
import React from "react";
import Table from "react-bootstrap/Table";
import { faker } from "@faker-js/faker";
import "./TableStyles.css";

const addresses: {
  [key: string]: any;
}[] = [];

for (let i = 0; i < 10; i++) {
  addresses.push({
    id: i + 1,
    address: `${faker.address.streetAddress()} ${faker.address.secondaryAddress()}`,
    zip: faker.address.zipCode(),
    city: faker.address.city(),
    state: faker.address.state()
  });
  console.log(faker.address)
}

export default function CustomTableHeight() {
  return (
    <div style={{ marginTop: 24, marginLeft: 12 }}>
      <Table className="">
        <thead>
          <tr>
            <th>#</th>
            <th>Street Address</th>
            <th>Zip Code</th>
            <th>City</th>
            <th>State</th>
          </tr>
        </thead>
        <tbody>
          {addresses.map((address, index) => {
            return (
              <tr key={index} className="row-height nowrap">
                <td className="cell-padding cell-padding-left">1</td>
                <td className="cell-padding">{address.address}</td>
                <td className="cell-padding">{address.zip}</td>
                <td className="cell-padding">{address.city}</td>
                <td className="cell-padding cell-padding-right">{address.state}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}
Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.