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

Obtaining the NativeElement of a component in Angular 7 Jasmine unit tests

Within the HTML of my main component, there is a my-grid component present. Main.component.html: <my-grid id="myDataGrid" [config]="gridOptions" </my-grid> In main.component.specs.ts, how can I access the NativeElement of my-grid? Cu ...

javascriptangularjasminekarma-jasmine

The computed function in Vue.js fails to provide a return value

I'm currently experimenting with a basic to-do list using vue.js. My goal is to calculate the total sum of all price values within an array. I created a small function under computed, but it seems like something isn't working correctly. Here&apos ...

javascriptforeachvue.js

Avoiding "Origin null is not allowed" error in Express.js POST request

I am attempting to send JSON data containing a set of key and values from JavaScript to Express.JS. Following advice from other posts, I have included the use of CORS and also added res.header("Access-Control-Allow-Origin", "*");. When testing the POST r ...

javascriptnode.jsexpress

Is there a way to inform the List component when the height of its row items has been altered in order to trigger a rerender

In my project, I am using a react-virtualized List where each item in the rows has an expand button. When this button is clicked, the row's height changes to reveal more information. The problem I am facing is that after clicking the button, the inne ...

javascriptreactjsnext.jsreact-virtualized

Sort objects based on a specific property that they possess

In my current setup, I have an array of objects structured as shown below: $scope.people = [{name: {last:"Doe", first:"John"}}, {name: {last:"Smith", first:"Joe"}}]; My goal is to implement a live filt ...

javascriptangularjsfilterangularjs-ng-repeatjsfiddle

Utilizing webpack HMR (Hot Module Replacement) independently of the webpack-dev-server

After successfully implementing HMR with webpack and seeing updates in the console when making changes, I have encountered an issue. While it works smoothly on the client side using webpack-dev-server, the server side setup with webpack/hot/poll requires m ...

reactjsexpresswebpackhotswapwebpack-hmr

The code "transform: rotate(' ')" does not seem to be functioning properly in Javascript

I set out to create a simple spin wheel exercise, but it quickly became more challenging than I anticipated. After researching how to make one online, I found code similar to mine that worked on a JSFiddle Example, yet my own code still didn't work. ...

javascripthtmlcss

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

Issue encountered with Ionic and ssh2: process.binding is not supported

I am currently delving into the world of Ionic and experimenting with creating a basic application that utilizes SSH2 to establish an ssh connection between the app and a server. Here is a breakdown of the steps I took to encounter the issue: Steps to Rep ...

javascriptnode.jstypescriptionic-frameworkionic3

Utilizing JavaScript to Load an HTML File in a Django Web Development Project

Having a django template, I aim to load an html file into a div based on the value of a select box. The specific target div is shown below: <table id="template" class="table"> Where tables are loaded. </table> There ex ...

javascripthtmldjango

Looking for a solution to the problem: Module 'import-local' not found

internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'import-local' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) Encoun ...

javascriptnpmbabeljs

Send information from a web page's elements to PHP with the help of AJAX

My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...

phpjavascripthtmlajax

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

This is a discussion on creating a responsive image gallery website with images of different sizes and no margins or paddings. The issue at hand is that the .showcase class hides at a specific @media breakpoint when resizing, but there is a desire to displ ...

htmlcssresponsive-design

What is the most effective method to guarantee the creation of an object prior to navigating through the code that relies on it?

I recently encountered an issue with my code that utilizes fetch() to retrieve and convert .tiff images into an html5 canvas for display in a browser using tiff.js (https://github.com/seikichi/tiff.js/tree/master). While the functionality mostly works as i ...

javascriptajaxasynchronousfetch

Are JavaScript Object notation and proper JSON the same thing?

When I execute valid JSON in the Chrome console: {"aaa":"bbb"} I encounter this error: SyntaxError: Unexpected token : But if I try something like this instead: {aaa:"bbb"} No error is thrown. Additionally, when running the following code ...

javascriptjson

Issues with the functionality of the react mapping function

Hey everyone, I have an array of objects here! this.state = { users :[{ userid:'1', fullName :'eddyabikhalil', dob:'10/03/1994', gender:'M', loan:[ ...

reactjsmapping

Using React Hook Form with Material UI Slider

I'm facing difficulties in integrating the Material UI Slider with React Hook Form. The values are not being registered and when I check the console.log, it displays undefined. Any thoughts on where I might have gone wrong? <Controller re ...

reactjsmaterial-uireact-hook-form

Incorporating video.js into an Angular website application

I've encountered a strange issue while attempting to integrate video.js into my angular app. <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="300" height="264" poster="http://video-js.zenco ...

javascriptangularjsvideohtml5-videovideo.js

Tips for personalizing the appearance of a specific date in React Native using the UI Kitten kit

I've been searching everywhere for a solution on how to customize the appearance of selected dates or ranges using React Native Ui Kitten kit, but I haven't had any luck. My goal is to be able to select a particular date or range and have it visi ...

reactjsreact-nativereact-hooksreact-native-ui-kitten

Exploring the versatility of Angular by creating various flex layouts with Angular Material cards

I'm struggling to implement the design shown below using cards and a flex layout in a responsive way. I've tried working on it using StackBlitz but haven't been able to get it right - the margin and layout get messed up on different screens. ...

cssangularflexboxangular-material