我希望每个项目之间都有一个间距，我正在使用 Reactstrap table

Question

我在 tr 中添加了一个 style，但是没有用。我的目标是在每个项目中添加边距。

export default function StoreListing() {
  const [item, setItem] = useState([]);
  const [dropdownType, setDropdownType] = useState(false);
  const toggleType = () => setDropdownType(prevState => !prevState);
  const [dropdownSize, setDropdownSize] = useState(false);
  const toggleSize = () => setDropdownSize(prevState => !prevState);

  useEffect(() => {
    setItem(data);
  }, []);

  const renderItems = () => {
    return item.map(res => (
      <tr key={res.id} style={{marginTop: '20px'}}>
        <td>
          <div>
            <img src={res.img} className={'test-img'} alt={res.img}></img>
          </div>
        </td>
        <td colSpan={5}>
          <div>{res.display_name}</div>
        </td>
        <td>
          <div>Php {res.price}</div>
        </td>
        <td>
          <select name="quantity" id="quantity"></select>
        </td>
        <td>
          <Dropdown isOpen={dropdownType} toggle={toggleType} size="sm">
            <DropdownToggle caret>Type</DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Small</DropdownItem>
              <DropdownItem>Medium</DropdownItem>
              <DropdownItem>Large</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </td>
        <td>
          <Dropdown isOpen={dropdownSize} toggle={toggleSize} size="sm">
            <DropdownToggle caret>Size</DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Small</DropdownItem>
              <DropdownItem>Medium</DropdownItem>
              <DropdownItem>Large</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </td>
        <td>
          <EditIcon style={{ marginRight: '15px' }} />
          <ClearIcon />
        </td>
      </tr>
    ));
  };

  return (
    <div className="test-container">
      <div className="test-table-container">
        <Table borderless hover responsive>
          <thead>
            <tr>
              <th></th>
              <th colSpan={5}>Name</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Type</th>
              <th>Size</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>{renderItems()}</tbody>
        </Table>
      </div>
    </div>
  );
}

Answer 1

您不能向 <tr> 标签添加边距：一种解决方案是通过像这样传递 style={{ borderCollapse: "separate", borderSpacing: "0 20px" }} 将样式应用于 Table：

 <Table
          borderless
          hover
          responsive
          style={{ borderCollapse: "separate", borderSpacing: "0 20px" }}
        >

并且您可以在 <tr> 标签中删除您的样式。这里是 sandBox

我希望每个项目之间都有一个间距，我正在使用 Reactstrap table

I want each item to have a spacing between them, im using Reactstrap table

css

reactjs

reactstrap