Question

我正在使用React Table在React JS中构建表。（https://github.com/tannerlinsley/react-table）。我找不到如何在React Table中删除边框。请帮助我，谢谢。

const tableStyle = {
  border: "none",
  boxShadow: "none"
};

class App extends React.Component{

  render(){
    const columns = [{
      Header: "Id",
      accessor: "id",
      headerClassName: 'headerTable',
      className: 'firstColumn',
    },
    {
      Header: "Name",
      accessor: "name",
      headerClassName: 'headerTable',
    },
    {
      Header: "Username",
      accessor: "username",
      headerClassName: 'headerTable',
    },
    {
      Header: "Email",
      accessor: "email",
      headerClassName: 'headerTable',
    }]

    return(
      <div>
        <ReactTable
        style={tableStyle}
        data = {this.state.users}
        columns = {columns}
        />
      </div>
    );
  }
}

table.css

.headerTable{
  background-color: #e8edf2;
  padding: 100px 0px;
  font-weight: 600;
  color: #1c2229;
  font-size: 1em;
}

这是我的表： Screenshoot Page

Answer 1

您可以将自定义className属性添加到Table并直接通过CSS对其进行样式设置，或者添加样式属性并添加一些内联样式。您可以在以下有关样式和自定义道具的部分中进行检查： https://github.com/tannerlinsley/react-table/tree/v6#styles

Answer 2

以下是code的示例。

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

const tableStyle = {
  border: "none",
  boxShadow: "none"
};

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          style={tableStyle}
          data={data}
          columns={[
            {
              Header: "First Name",
              accessor: "firstName",
              className: "sticky",
              headerClassName: "sticky"
            },
            {
              Header: "Last Name",
              id: "lastName",
              accessor: d => d.lastName
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Status",
              accessor: "status"
            },
            {
              Header: "Visits",
              accessor: "visits"
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

如您所见，我定义了一个名为tableStyle的对象，其中包含css属性，并使用样式prop将其传递给了组件ReactTable

Answer 3

您可以使用属性getTdProps

 getTdProps={() => ({
    style: { border: `none` },
  })}

如何从React表中删除边框？

3 个答案: