Unable to apply margin right to React Material-UI table

I am struggling to add margin to the right of a mui table with no success. Below is the code I have used:

<TableContainer>
        <Table sx={{ mr: 100 }} aria-label="customized table">
          <TableHead>
            <TableRow>
              <StyledTableCell sx={{fontSize: 20, borderBottom: "1px solid #d9d9d6", borderTop: "1px solid #d9d9d6", borderLeft: "1px solid #d9d9d6", borderRight: "1px solid #d9d9d6"}}>RPC Name Response</StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell sx={{borderBottom: "1px solid #d9d9d6", borderLeft: "1px solid #d9d9d6", borderRight: "1px solid #d9d9d6"}} className="response-container">
                <div className="response">{response}</div>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>

Despite adding sx with mr to Table component, the margin addition does not take effect. I'm looking for advice on how to successfully apply margin to an mui table.

htmlcssreactjsmaterial-uimaterial-table

Answer №1

By default, both the <TableContainer /> and <Table /> components have a width of 100%. If you need to add margin to either element, simply set the width to auto.

<TableContainer sx={{ mr: '100px', width: 'auto' }}>
  <Table aria-label="customized table">
    <TableHead>
      <TableRow>
        <StyledTableCell
          sx={{
            fontSize: 20,
            borderBottom: '1px solid #d9d9d6',
            borderTop: '1px solid #d9d9d6',
            borderLeft: '1px solid #d9d9d6',
            borderRight: '1px solid #d9d9d6',
          }}
        >
          RPC Name Response
        </StyledTableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell
          sx={{
            borderBottom: '1px solid #d9d9d6',
            borderLeft: '1px solid #d9d9d6',
            borderRight: '1px solid #d9d9d6',
          }}
          className="response-container"
        >
          <div className="response">{response}</div>
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

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

What is the optimal method for adding classes to the html and body tags in a next.js project?

Currently, I am utilizing Next.js and Tailwind CSS in my project. In order to ensure proper display of certain elements, I found it necessary to add style classes to the <html> and <body> tags. This adjustment was made to my MyApp component: f ...

reactjsnext.jstailwind-css

Hover effect that smoothly transitions to a background image appearing

I want to achieve a smooth fadeIn effect for the background image of a div. Currently, I have a function that displays the background image when hovering over the relevant div, but the transition is too abrupt. I would like it to fade in and out instead of ...

jqueryhtmlfadein

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

The mapStateToProps function in a Higher Order Component is receiving an OwnProps argument with a property that is not defined

I'm a new user of react-redux trying to connect a higher-order component to the react-redux store. In the mapStateToProps function, I'm using the ownProps argument to filter the state. However, the property I'm trying to use within OwnProps ...

reactjstypescriptreduxreact-redux

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution. My website features a scrolling sidebar measuring approximately ...

javascriptjquerycss

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

After reviewing various solutions online, I noticed that they all function properly on Chrome and Firefox but encounter issues with Internet Explorer when interacting with an SVG. For instance, consider the following code snippet: $(document).on("click",( ...

javascriptjqueryhtmlsvg

Exploring the process of setting a background image within a div tag

My goal was to design a clickable box that would redirect users to "#". I initially thought about using area maps within div or p tags, but unfortunately that wouldn't work. Does anyone have any suggestions for alternative solutions? ...

htmlcssarea

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

javascripthtmlangular

Eliminate the padding from the ListDetailPaneScaffold

Is there a way to eliminate the padding caused by ListDetailPaneScaffold? import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Arrangement import androidx. ...

androidmaterial-uiandroid-jetpack-compose

Caution: React alert for utilizing the UNSAFE_componentWillReceiveProps in strict mode

As a newcomer to React, I encountered a warning that has me stuck. Despite researching extensively online, I still can't resolve it. The warning message is: https://i.stack.imgur.com/4yNsc.png Here are the relevant portions of the code in App.tsx: ...

javascriptreactjsfrontendsemantic-ui-react

Upon the initial data retrieval, everything seems to be working fine. However, when the user transitions to chatting with another user, the state value does not reset and instead shows a combination

Exploring the world of react.js and node.js, I am currently working on developing a chatting application with the integration of socket.io. The issue I'm facing is that when a user clicks on another user to chat, the previous chat messages are display ...

javascriptnode.jsreactjssocket.io

Include parameters for a pagination system

I have a script that fetches data from my database and generates pagination. Everything is working fine, but now I want to include a conditional statement to differentiate the user level as New, Current, or Renewing client. I've already set up some s ...

javascriptjquerycsspluginspagination

React: State does not properly update following AJAX request

I'm currently facing a challenge in my React project where I need to make two AJAX calls and update the UI based on the data received. Below is the implementation of my render method: render() { if (this.state.examsLoaded) { return ( ...

javascriptajaxreactjs

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

javascriptreactjsredux

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

How can we achieve a seamless fade transition effect between images in Ionic 2?

My search for Ionic 2 animations led me to some options, but none of them quite fit what I was looking for. I have a specific animation in mind - a "fade" effect between images. For example, I have a set of 5 images and I want each image to fade into the ...

csstypescriptanimationionic2

Incorporate new content into JavaScript using the input element

I have a unique question - can text be added to JavaScript using the input tag? For example, <input type="text" id="example" /> And let's assume the JavaScript function is: function display_text() { alert("The text entered in #example wi ...

javascripthtmlforms

Experience the full power of the bootstrap grid system with a unique feature: nested overflow-y scrolling

Struggling with the bootstrap grid and a nested div with overflow-y. I followed advice from this stack overflow post, attempting to add min-height:0 to the parent ancestor, but can't seem to make it work. View screenshot here - Chrome on the left, Fi ...

htmlcssbootstrap-4grid-layout

How to Extract Information from a Table Enclosed in a Div Using HTML Parsing?

I'm new to HTML parsing and scraping, looking for some guidance. I want to specify the URL of a page (http://www.epgpweb.com/guild/us/Caelestrasz/Crimson/) to grab data from. Specifically, I'm interested in extracting the table with class=listing ...

jqueryhtmljsonparsingscreen-scraping

The curly braces in AngularJS are failing to display the values on the HTML page

After trying various articles and solutions to different questions, I am still unable to resolve my issue. I am working on a blank ionic project and it is running smoothly in my browser using ionic serve without any errors. However, instead of displaying ...

javascripthtmlangularjsionic-framework