Ways to create distance between two Table Rows in Material-UI TableRow

const useRowStyles = makeStyles({
  root: ({ open }) => ({
    backgroundColor: open ? "#F5F6FF" : "white",
    backgroundOrigin: "border-box",
    spacing: 8,
    "& > *": {
      height: "64px",
      borderSpacing: "10px 10px ",
      borderCollapse: "separate",
    },
  }),
});
<TableRow className={classes.root}>
     cell content will be placed here
<TableRow>

this is the code snippet I am using with TableRow Material-UI, but unfortunately, it doesn't seem to work as expected

Is there anyone who can guide me on how to insert space between rows in Material-UI TableRows?

I have encountered several similar questions, however, none of them have resolved my issue

For reference, I have created a reproducible example of this problem here

cssreactjsmaterial-ui

Answer №1

To achieve the desired effect of setting the border bottom in every row except the last one, you will need to place your TableRow inside the Table component. Then, add the following styles to your TableRow container:

const tableRowStyles = makeStyles({
  tableBody: {
    "& > :not(:last-child)": {
      borderBottom: "25px solid red"
    }
  }
});

<TableBody className={tableRowStyles.tableBody}>
  <TableRow>
    {...}
  </TableRow>
  <TableRow>
    {...}
  </TableRow>
</TableBody>

Check out the Live Demo for a visual representation:

Live Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stepping up Your Next.js Game with the Razorpay Payment Button Integration

When using the Razorpay payment button on a website, it provides a code snippet like this: <form> <script src = "https://cdn.razorpay.com/static/widget/payment-button.js" data-payment_button_id = "pl_FNmjTJSGXBYIfp" data ...

javascriptreactjsnext.jsrazorpay

Choose a drop-down menu with a div element to be clicked on using Puppeteer

Issue Description: Currently encountering a problem with a dropdown created using material select. The dropdown is populated through an API, and when selected, ul > li's are also populated in the DOM. Approaches Tried: An attempt was made to res ...

javascriptreactjsmaterial-uipuppeteer

Dropdown menu is not positioning correctly over other elements on the webpage

After researching multiple stack overflow questions and attempting various solutions, I still haven't been able to resolve my issue. Please refrain from marking this question as a duplicate. The problem I am facing is that my dropdown menu is not ap ...

htmlcsssass

Unexpected state behavior observed while retrieving data from API

I am struggling to understand the concept of state in React. Specifically, I have a TextField within a Material UI Autocomplete component that is supposed to fetch new results from an API each time the text changes. The basic output list at the bottom upda ...

reactjsreact-hooksmaterial-ui

Ways to specify the styles for tr, td, and label elements within a material table

Hey there! Currently, I'm working with material table in react. I came across this page: https://material-table.com/#/docs/features/styling, where it mentions that we can use cellStyle, headerStyle. But what if I want to add more detailed styles to e ...

javascriptreactjsmaterial-ui

Having trouble with ReactJS not fully rendering Bootstrap 4 components

I recently came across a Bootstrap 4 template for a navbar with login functionality on this website and decided to convert it into code. Here is the resulting code: import React, {Component} from 'react'; class HeaderComponent extends Component ...

reactjsbootstrap-4

Max Savings Seeker API Version Four

Currently, I am working on incorporating the Bargain Finder Max Rest API into my Node.js application. However, the data being returned is not as complete or useful as I had hoped. Does anyone have any suggestions on how to obtain more comprehensive data? D ...

node.jsreactjsrestsabresabredav

Modal window closed - back to the top of the page

I am struggling with a simple modal popup window that does not maintain the scroll position when closed, instead returning you to the top of the page. I am looking for a way to keep it at the same scroll position without much knowledge of Javascript. You ...

javascriptjqueryhtmlcss

Issue: 0909006C - The PEM routines are unable to retrieve the name as there is no start line

Upon cloning a project to begin working on it, I encountered an error after running yarn install and yarn start https. The error message reads: Error: 0909006C:PEM routines:get_name:no start line... The project was created by someone else and unfortunatel ...

reactjsnpmhttpsyarnpkgpem

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. A ...

css

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Eliminating unnecessary white space while utilizing the first-letter CSS property

Is there a way to remove the extra whitespace added under the first line when making the first letter of a paragraph bigger than the rest of the text? I already tried adjusting padding and margins on p::first-line without success. p{ line-height: 1.4; } p ...

htmlcss

The alignment of the third column div is off and not displaying properly

I am having some trouble with aligning the divs on my page in a column layout. Despite setting the first two divs to float left, the third one does not align properly. I want the third div to be floated right and aligned with the first two. You can see an ...

csshtml

Typescript issue with session property not being read by Nextjs next-auth sessionProvider

I encountered an issue while using the Mantine template with Next-auth. When trying to implement the sessionProvider in the application, I received an error stating that "session is not defined." Error implementing session on session provider ----Edit--- ...

reactjsauthenticationnext.jsnext-authmantine

Keeping the header in place: fixed positioning

This particular situation is quite challenging for me. I have a webpage that requires horizontal scrolling. There is a menu at the top of the page that needs to remain centered on the page at all times. Even with the use of jQuery, I am uncertain how to ac ...

htmlcsspositionfixed

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

Issue with text alignment in Material-UI card component

As a beginner in the realm of React, I have been diligently following a course and working on a demo project. However, I seem to be facing an issue with aligning the price text on a card that features only a single line of description. What I am aiming for ...

reactjsmaterial-uifrontend

The Material UI 5 Autocomplete feature is not providing the expected filtered options

I am currently utilizing Material UI V5, Since the default filtering in Autocomplete does not provide the desired result array, I have implemented my own filterOptions function. const customFilter = (options, state) => { let result = options.filter(op ...

material-uiautocomplete

Running npm commands, such as create-react-app, without an internet connection can be a

Currently, I am working in an offline environment without access to the internet. My system has node JS installed. However, whenever I attempt to execute the npm create-react-app command, I encounter an error. Is there a workaround that would allow me to ...

javascriptnode.jsreactjsnpm

Is there a way to send the image object to the onclick function as it is being assigned?

I apologize if my question is a bit unclear, as I am currently teaching myself how to use javascript. I am working on generating image thumbnails dynamically and would like the ability for users to enlarge the image when they click on the thumbnails. The p ...

javascripthtmlcss