我希望每个项目之间都有一个间距，我使用 Reactstrap 表答案

【问题标题】：I want each item to have a spacing between them, im using Reactstrap table我希望每个项目之间都有一个间距，我使用 Reactstrap 表
【发布时间】：2021-04-19 05:22:15
【问题描述】：

我在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>
  );
}

【问题讨论】：

我没有找到答案，但我做了这个sandbox，如果它可以帮助某人找到答案。另一方面，您在下拉切换功能上有问题。如果您单击表格的一个下拉菜单，则每个具有相同类型的下拉菜单都会切换到。

标签： css reactjs reactstrap

【解决方案1】：

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

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

您可以删除<tr>tag 中的样式。这里是sandBox

【讨论】：