Currently developing an application using React.JS and Material UI.
Utilizing the table component for my project, I have been successful in adjusting the column width but encountered difficulties when attempting to modify the overall table width.
The goal is to synchronize the width of the table with that of the header component (marked in purple).
If you have any insights or solutions on how to accomplish this task, your input would be greatly appreciated. Thank you in advance for your assistance.
https://i.sstatic.net/5jWFh.png
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>
[…]
</TableBody>
</Table>
);
}
}
export default PaymentTable;
style.css
.table {
width: 1200px;
}
** Edit **
After making adjustments as per recommendations, the table's width has increased but does not span the entire window, resulting in a scroll bar appearing below. https://i.sstatic.net/oiOPr.png