无法固定React-Table列的宽度

Question

这里有一个非常基础的问题，我正试图修复我的 react-table 列的宽度，但它不会改变（它始终按照内部项目的宽度生成），说实话，这个表格大部分是从教程中学到的，所以我不确定它的大部分工作原理。

我正在使用 react hooks 和 react-table v7.7！

 const data = useMemo(() => expenses, [expenses]);

  const columns = useMemo(
    () => [
      {
        Header: "Date",
        accessor: "date",
        width: 100
      },
      {
        Header: "Expense",
        accessor: "expense",
        width: 200
      },
      {
        Header: "Amount",
        accessor: "amount",
        width: 100
      },
      {
        Header: " ",
        width: 100,
        Cell: ({ row }) => (
          <div>
            <button onClick={() => editHandler(row.original)}>Edit</button>
            <button onClick={() => deleteHandler(row.original)}>Delete</button>
          </div>
        ),
      },
    ],
    []
  );

....

        <table className="expenses-table" {...getTableProps()}>
          <thead>
            {headerGroups.map((headerGroup) => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th className="table-header" {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row) => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map((cell) => {
                    return (
                      <td className="table-data" {...cell.getCellProps()}>
                        {cell.render("Cell")}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>

- JeannelMYT

---

你给你的表格设置了一个固定宽度，根据你的 const columns，你期望得到什么？ - Someone Special

我正在尝试给它一个固定的宽度，但它仍然是动态的。 - JeannelMYT

修改了我的标题，因为我认为它有些令人困惑。 - JeannelMYT

我遇到了完全相同的问题。@JeannelMYT 你自己找到解决方案了吗？ - Nuri Engin

我遇到了完全相同的问题。@NuriEngin，你自己找到了解决方案吗？ - Mustafa Yusuf

Answer 1

为了让宽度属性起作用，我认为您需要向您的expense-table类或直接向您的<table>标签添加以下CSS/样式之一。这是为了处理溢出行为，因为当前内容没有选择而只能调整表格列的大小。

table.expense-table { table-layout:fixed; }
table.expense-table td { overflow: hidden; }

- Someone Special