Ndtyjky

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;

    }