Question

我在反应用户界面材料中使用table

https://material-ui.com/demos/tables/ 我想减小行高，内容高度或单元格高度。我的内容行以红色和白色交替显示。现在，我想减小行高。我尝试减小{{1 }}和边距，但不起作用这是我的代码 https://codesandbox.io/s/98k3r5l9k4

padding

Answer 1

您可以在行下添加 height属性，以更改高度，如下所示：

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: 0,
    fontSize: 8
  },
  table: {},
  row: {
    border: "none",
    height:"10px", **(just add this line, value can be anything, can also be in percentage)**
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
  body: {
    fontSize: 10,
    border: "none"
  }
});

Answer 2

在48px元素上将高度设置为<tr>，您可以使用样式row定位元素：

const style = {
 ...
 row: {
    border: "none",
    height: 28,
    "&:nth-of-type(odd)": {
      backgroundColor: "red"
    }
  },
}

我将其设置为28，现在对我有效。

如何降低单元格或行的高度？

2 个答案: