无法在表中的两行之间留出空格

Question

<tbody className="body">
        {this.state.products.map((product) => (
          <tr
            className="row-10  text-center border "
            style={{ borderCollapse: "seperate", borderSpacing: "15px" }}
          >
            <td>
              <img
                src={product.image}
                alt="Internet Issues"
                style={{ width: "140px", display: "block" }}
              />
            </td>
            <td className="align-middle font-weight-bold">
              {product.productName}
            </td>
            <td className="align-middle">
              {product.enteredOn} <br></br> {product.time}
            </td>
            <td className="align-middle">{product.enteredBy}</td>
            <td className="align-middle">{product.reviewed}</td>
            <td className="align-middle">
              <button
                className="btn text-white rounded-0"
                style={{
                  backgroundColor: "#8bb616",
                  width: " 100px",
                  height: "35px",
                }}
              >
                Edit
              </button>
            </td>
          </tr>
        ))}
      </tbody>

我已经在tr标签中添加了borderCollapse和borderSpacing样式，但是我仍然不能在两行之间有空格。有人能帮我解决这个问题吗？

Answer 1

您可以将“height”提供给“td”

​

table tr td {
   height:40px;
}

  <table>
    <tr>
      <td>Test1</td>      
    </tr>
    <tr>
      <td>Test2</td>
    </tr>
  </table>

​