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

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>标记中删除您的样式。 这里是沙盒