![](/img/trans.png)
[英]How can I change the fontSize of the contents of a table in Material UI?
[英]How can I change a width of table Material UI / React?
我正在使用 React.JS 和 Material UI 制作一個應用程序。
我將表格組件用於我的應用程序。 我可以改變列的寬度,但我不能改變表格的寬度。
表格的寬度應與標題組件的寬度相同。(紫色)。
我怎樣才能做到這一點?
請在下面找到當前視圖。 我將不勝感激任何建議。 非常感謝您提前提供的幫助。
index.js
import React from 'react';
import {
Table,
TableBody,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
import Check from './img/check.png';
import Fail from './img/fail.png';
import Master from './img/Master.png';
import Visa from './img/Visa.png';
import Paypal from './img/Paypal.png';
class PaymentTable extends React.Component {
render() {
return(
<Table>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
<TableRow>
<TableHeaderColumn></TableHeaderColumn>
<TableHeaderColumn>Today</TableHeaderColumn>
<TableHeaderColumn>Payment Method</TableHeaderColumn>
<TableHeaderColumn>Narrative</TableHeaderColumn>
<TableHeaderColumn>Amount</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
<TableRow>
<TableRowColumn><img src={Check} alt="Check" className="Check"/>
</TableRowColumn>
<TableRowColumn>12N35, 22 March 2017</TableRowColumn>
<TableRowColumn><img src={Master} alt="Master"
className="Master"/>MasterCard...4483</TableRowColumn>
<TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long
Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)
</TableRowColumn>
<TableRowColumn>$912.51</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn><img src={Check} alt="Check" className="Check"/>
</TableRowColumn>
<TableRowColumn>12N35, 22 March 2017</TableRowColumn>
<TableRowColumn><img src={Paypal} alt="Paypal" className="Paypal"/>PayPal</TableRowColumn>
<TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
<TableRowColumn>$912.51</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn><img src={Check} alt="Check" className="Check"/></TableRowColumn>
<TableRowColumn>12N35, 22 March 2017</TableRowColumn>
<TableRowColumn><img src={Visa} alt="Visa" className="Visa"/>VISA...1532</TableRowColumn>
<TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
<TableRowColumn>$912.51</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn><img src={Fail} alt="Fail" className="Fail"/></TableRowColumn>
<TableRowColumn>12N35, 22 March 2017</TableRowColumn>
<TableRowColumn><img src={Visa} alt="Visa" className="Visa"/>VISA...1532</TableRowColumn>
<TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
<TableRowColumn>$912.51</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn><img src={Check} alt="Check" className="Check"/></TableRowColumn>
<TableRowColumn>12N35, 22 March 2017</TableRowColumn>
<TableRowColumn><img src={Master} alt="Master" className="Master"/>MasterCard...4483</TableRowColumn>
<TableRowColumn>Prestige Cosmetics, Total Intensity Eyeliner Long Lasting Intense Color, Deepest Black, 1.2 g (.04 oz)</TableRowColumn>
<TableRowColumn>$912.51</TableRowColumn>
</TableRow>
</TableBody>
</Table>
);
}
}
export default PaymentTable;
樣式.css
.table {
width: 1200px;
}
** 編輯 **
使用style={}
屬性覆蓋Table
組件的寬度。 一個示例如下所示:
<Table style={{ width: 1200 }}>
material UI 有一個<TableContainer></TableContainer>
組件,你可以調整它的大小,如果內容太大,里面的表格會溢出
如果您在表格上使用stickyHeader
,它還會將表格標題保持在頂部
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.