Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work.

.MuiTableCell-root {
    display: table-cell;
    padding: 14px 40px 14px 16px;
    font-size: 0.875rem;
    text-align: left;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.43;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    letter-spacing: 0.01071em;
    vertical-align: inherit;

What's intriguing is 

.MuiTableCell-root:last-child {
    padding-right: 16px;
}
javascriptcssreactjsmaterial-designmaterial-ui

Answer №1

Check out the current specifications here: https://material.io/design/components/data-tables.html#specs

While the spec doesn't explicitly mention a 40px padding, there is noticeable spacing between columns in the example provided.

The purpose of this added space is to create a visually appealing layout with enough room between cells to enhance readability. When using size="small" on the table, the amount of padding is reduced to 24px for the right side.

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

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

cssfirefoxiis-7.5

Tips on managing the onKeyUp event in a ReactJS form

Here is a simple JavaScript function called numericOdds implemented in home.js file: function numericOdds(e) { var valid = /^[1-9]{1}[0-9]{0,1}$/ var number = /^[1-9]{1}$ | ^[1-9]{1}[0-9]{1}$/ var lastValid = ''; var n; console.log(&apo ...

javascriptreactjs

Attempting to showcase data from two input fields

My goal is to create a display that shows values from 2 text inputs and an image array (using expo image picker) every time data is added, similar to a todo app. I am not encountering any errors when adding the data, but the display remains empty and does ...

reactjsreact-nativearraylistexpo

Emails sent through an HTML form submission should always include a valid "from"

I am currently in the process of creating a feedback form that allows individuals to provide anonymous feedback. I have explored nodemailer and node-sendmail, but I have encountered an issue with both requiring a from address. While I am aware that this ca ...

javascripthtmlnode.js

Having trouble with @Mui and modularized scss conflicting sporadically. Is there a way to reliably overwrite @mui default styling using scss modules?

Currently, I am enhancing an existing React app that utilizes @mui/material components. The SCSS modules are linked to my JavaScript components, and I import them along with the material components like this. // STYLE IMPORT import styles from "./logi ...

reactjssassmaterial-uireact-css-modules

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Context I am currently developing a tagging system called @Name for my website. Successfully, I have managed to detect names upon keystroke and replace the content with the corresponding div class='tag' data-id='User-id'>Name</di ...

javascriptjqueryregexhtml

Displaying grid elements in a single row - Using ReactJS with Material-UI

I am attempting to design a material ui carousel that shows 3 items in one row, even when the browser window is resized. I want the excess items to be hidden instead of being stacked below. Here is how it looks on full screen: https://i.stack.imgur.com/r ...

reactjsflexboxmaterial-uicss-gridreact-flexbox-grid

What steps should I take to implement asynchronous functionality in my code for a Google Chrome Extension?

I am currently working on a Google Chrome extension that needs to gather data from two different servers and send it to another service. I am facing an issue with making the process asynchronous, even though the requests are functioning properly. After se ...

javascriptajaxasynchronousgoogle-chrome-extensionpromise

Show off HTML groups with personalized attributes using react-map-gl (Mapbox)

I have been experimenting with adapting the Display HTML clusters with custom properties example for react-map-gl. I managed to get basic clusters without custom styling working by modifying the example from Create and style clusters: <ReactMapGL ref={ ...

reactjsmapboxmapbox-gl-jsreact-map-gl

What is the best way to showcase the information from this API on an HTML page using Vanilla JavaScript?

I am currently working on implementing an AJAX call to fetch data from a movie API online. Below is the HTML code I have written for this: <html> <head> <meta charset=utf-8> <title>Movie Database</title> ...

javascripthtmljsonajax

Currently, I am developing a project in Next.js and looking to integrate the Cropper feature from the 'react-easy-crop' library. However, I am encountering some difficulties along the way

When creating a form input to select a file, the user can press import and a model will open with a cropper tool. After selecting the desired position and cropping the image, sometimes it displays as white or black depending on the selected picture. Result ...

reactjsnext.jsreact-hooks

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

javascripthtmlcssangular

Invoking a JavaScript function within a different JavaScript function

Is there a way to ensure that the JavaScript function works properly even when using a text editor? var editor = $('#CKEditor1').ckeditorGet(); editor.on("instanceReady", function () { this.document.on("keydown", function (event) { ...

javascriptjqueryaudio

What could be causing OnChange to malfunction within Formik?

Formik in React is giving me trouble while working on a dummy app. When I set the value prop for the input boxes, I am unable to type anything. However, if I remove the value props, I can type but it doesn't reflect in the values when submitting. Tak ...

htmlreactjsformik

Looking for a method to incorporate an onclick function into a column for renderCell within the MUI Datagrid. Any suggestions?

I'm currently developing a react application and utilizing the MUI Datagrid to present some data. I have incorporated a rendercell to insert an edit icon which should trigger a pop-up modal when clicked. Below is the column setup. export const specifi ...

javascriptreactjsmaterial-uimui-x-data-gridmui-x

Accessing a PDF document from a local directory through an HTML interface for offline viewing

As I work on developing an offline interface, I'm encountering an issue with displaying a PDF file when clicking on an image. Unfortunately, the code I have in place isn't working as intended. Can someone please assist me with this problem? Below ...

javascripthtml

What is the advantage of using require() over url/path for displaying images in react native?

What is the rationale behind using require() rather than directly using the URL or path of an image to display images in React Native? Is there a specific advantage to using require()? ...

node.jsreactjsreact-native

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

javascripthtmlcssbootstrap-5

Consecutive pair of JavaScript date picker functions

My issue involves setting up a java script calendar date picker. Here are my input fields and related java scripts: <input type="text" class="text date" maxlength="12" name="customerServiceAccountForm:fromDateInput" id="customerServiceAccountForm:from ...

javascripthtml

Can someone please clarify the explanation for the concealed property description?

Looking at https://material-ui.com/api/hidden/, the description for the mdUp property on this component says: "If true, screens of this size and larger will be hidden." This explanation is quite unclear. What exactly are they referring to by "screens" and ...

material-ui