Pfthb

How can I modify the size of table cell in react semantic ui ? I am using functional component named as updatesPage but the CSS is not working why so ?

code:

 import Icon, Label, Menu, Table from 'semantic-ui-react';

 const UpdatesPage = () => (
 <Table celled>
 <Table.Header>
 <Table.Row>
 <Table.HeaderCell>Header</Table.HeaderCell>
 <Table.HeaderCell>Header</Table.HeaderCell>
 <Table.HeaderCell>Header</Table.HeaderCell>
 </Table.Row>
 </Table.Header>

 <Table.Body>
 <Table.Row>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 </Table.Row>
 <Table.Row>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 </Table.Row>
 <Table.Row>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 </Table.Row>
 </Table.Body>
 </Table>
 )

 export default UpdatesPage;

CSS :

.ui.table thead th 
 width: 30px;


.ui.table tbody td 
 width: 30px;

CSS is not working why so ? Am I selecting the wrong css selectors see screenshot.

Semantic UI React accepts a className parameter on the table, header, row, and cell.
Using the following code and a style import you can change the overall look and feel of the table. You can see a preview here.

Table.js

import "./style.css";
const UpdatesPage = () => (
 <Table celled>
 <Table.Header>
 <Table.Row>
 <Table.HeaderCell>Header</Table.HeaderCell>
 <Table.HeaderCell>Header</Table.HeaderCell>
 <Table.HeaderCell>Header</Table.HeaderCell>
 </Table.Row>
 </Table.Header>
 <Table.Body>
 <Table.Row>
 <Table.Cell className="blue-with-padding">Cell</Table.Cell>
 <Table.Cell className="yellow-with-large-padding">Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 </Table.Row>
 <Table.Row>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 </Table.Row>
 <Table.Row>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell>Cell</Table.Cell>
 <Table.Cell className="four-hundred-width">Cell</Table.Cell>
 </Table.Row>
 </Table.Body>
 </Table>
 );

style.css

 .blue-with-padding 
 padding: 5px !important;
 background: blue;
 
 .yellow-with-large-padding 
 padding: 70px !important;
 background: yellow;
 
 .four-hundred-width 
 width: 400px;