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

CSS: Adding decorative trailing dots below the header when positioned over a background

I am seeking assistance with achieving a specific effect in CSS, as shown in the attached screenshot. The trailing dots should cover the entire width of the element (100%) and be responsive. However, I encountered an issue when placing the header on a bac ...

htmlcsspseudo-class

The Google Maps feature is not appearing on the webpage as expected

I'm currently working on a website that features a footer with a Google Map. The homepage displays this footer without any issues: However, in other pages, I've implemented the footer by calling it from an external file using jQuery as shown bel ...

javascriptjquerycsshtmlgoogle-maps-api-3

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...

htmlcsscss-positionabsolute

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

javascriptjquerycsstwitter-bootstrap

Searching Firestore database using parameters in the URL

I am striving to retrieve plants that have a folderId with a value based on the parameters from useRouter. Although there are no errors, no data is being returned, and there are indeed plants with folderId in the "PlantsData" collection. Here is the code ...

reactjsgoogle-cloud-firestorenext.js

Using React Material UI checkboxes: Learn how to manipulate other checkboxes within a group by toggling a single checkbox

I've set up 3 checkboxes - Not Started, In Progress, and Completed - and I want only one to be checked at any given time. If 'Not Started' is initially checked, how can I make it uncheck automatically when I check 'Completed'? Th ...

javascriptreactjscheckboxmaterial-uistate

Create a grid layout similar to Bootstrap by utilizing the Material-UI Grid list component

Looking to make the transition from Bootstrap to Material-ui in my ReactJS project. I have a JSFiddle showcasing a 2-column panel with a header using Bootstrap. How should this be coded using React Material-UI? https://i.stack.imgur.com/ONDwb.png The goa ...

reactjstwitter-bootstrap-3material-ui

I would like to retrieve an array of objects containing state and count information from this data in ReactJS

I have a dataset stored in an array of objects as follows [{name,state},{name,state},{name,state},{name,state},{name,state}]. I am interested in extracting the state data along with the number of people belonging to each state. To achieve this, I would l ...

javascriptnode.jsreactjs

Having trouble importing SVG as a React component in Next.js

I initially developed a project using create-react-app with Typescript, but later I was tasked with integrating next.js into it. Unfortunately, this caused some SVGs throughout the application to break. To resolve this issue, I implemented the following pa ...

javascriptreactjstypescriptwebpacknext.js

Updating data without having to refresh the page is a useful feature when it comes to deleting a document on Firebase

Currently, I have a button that triggers this function to remove a value from Firebase. These values are being displayed in a flatlist on the same page. The function itself works perfectly fine, but to see the updated changes, I either need to refresh the ...

reactjsfirebasegoogle-cloud-firestore

Understanding how to override a child function in a parent component using React

Many components are using the PanelHeader component, which includes a refresh icon that triggers the function: this.toggleReload, Instead of just reloading the content, I want to pass a function from the parent component and execute it; (CallMyCustomFunct ...

reactjsreact-hooks

"Can someone point me to the location of the onScroll event within Material

I have been unable to locate any information in the Material UI documentation that addresses how to trigger a function on scroll using the onScroll event. All of my components follow either a functional and stateless approach or they are container componen ...

reactjsreduxreact-reduxmaterial-ui

What is the best way to use props to pass color and update the theme?

Hey there, I'm experimenting with changing colors by passing either 'primary' or 'secondary', but I'm not sure how to do it. // @flow import * as React from 'react'; import withStyles from '@material-ui/core/s ...

react-reduxmaterial-uiflowtype

Top strategy for monitoring a user's advancement in reading different text segments

If you are familiar with zyBooks, I am looking to implement a similar feature where users can track the sections they have read and mark them as completed with a button. However, I am struggling conceptually with determining how best to structure my mongo ...

javascriptnode.jsreactjsmongodbmaterial-ui

What are the best methods for ensuring a website maintains consistent visibility across all different screen sizes?

Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...

javascripthtmlcssfrontendweb-deployment

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

Encountering a "CORS policy blockage" error following the execution of `npm run build`

As a beginner in React, I recently developed a React application that functions properly when using npm start. However, upon running npm run build, I am encountering an issue where the main content of the page is not displaying. Although the navigation bar ...

reactjsnpmcreate-react-appnpm-build

When using Framer Motion for page transitions alongside React Router DOM v6, the layout components, particularly the Sidebar, experience rerenders when changing pages

After implementing page transitions in my React app using Framer Motion and React-Router-DOM, I noticed that all layout components such as the sidebar and navbar were unexpectedly rerendering upon page change. Here's a snippet of my router and layout ...

reactjstypescriptreact-router-domframer-motion

Utilizing optional parameters with React Router

Imagine I have a page at http://www.example.com/page/#/search set up with the following routing: <Router history={hashHistory}> <Route path='/search/' component={SearchPage} /> </Router> When a user performs a search using t ...

javascriptreactjsparametersreact-routeroptional-parameters

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

htmlcsswebresponsive-designmedia-queries