Unable to style the colors of Table.Column, text. Table Border

[elgeneee]

I am currently using TailwindCSS with Next UI for my table component. I tried to style the Table.Column to my desired background color, and also for border, text to cater for different themes(light/dark mode). Can you share some examples how do you customize the table border color, background, and text color? Appreciate it!

[jrgarciadev]

Hey 👋🏻, could you share what are you trying for styling the table column?

[elgeneee]

I have tried to add className, and border within the CSS. Still does not have any effect on the table

Code:

<Table
    bordered
    aria-label="Table with goals"
    shadow="false"
      css={{
        height: "auto",
        minWidth: "100%",
        border: "1px solid #000000",
        borderColor: "#000000",
      }}
      className="dark:bg-slate-800 border-black"
    >
        <Table.Header columns={columns} className="bg-black">
        {(column) => (
          <Table.Column key={column.key}>{column.label}</Table.Column>
        )}
      </Table.Header>
      <Table.Body items={rows} >
        {(item) => (
          <Table.Row key={item.key} css={{fontSize: "15px"}}>
            {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
          </Table.Row>
        )}
      </Table.Body>
    </Table>

[jrgarciadev]

You should use the Table.Column css prop, here's an example:

https://codesandbox.io/s/nextui-table-custom-column-css-6l0w0u?file=/App.js

[elgeneee]

Thank you for your reply. But how do you customize the border? Referring to the image, it is white, I can't seem to change the border color and radius.

[melodyxpot]

I can't see the page.