reactjs - 无法修复 React-Table 列的宽度

Question

super 菜鸟问题，我正在尝试修复我的 react 表列的宽度但它没有改变(它保持根据内部项目的宽度生成)，这个表的大部分来自老实说教程，所以我不确定其中大部分是如何工作的。

我正在使用 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>

Answer 1

为了使 width 属性起作用，我认为您需要将以下 css/style 之一添加到您的 expense-table类(class)或你的<table>直接贴标签。这是为了处理溢出行为，因为当前内容别无选择，只能调整表格列的大小。

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