如果内容溢出，如何增加表格单元格的高度

Question

我正在使用 firebase 实时数据库编写信用日志系统。我有这样的事情：

我想拥有它，这样当内容真的很长时，它不会导致滚动条，而是会导致单元格的高度增加。我试过做一些乱七八糟的事情，但我不太擅长顺风。我附上了下面的代码。

import React, {useState, useEffect} from "react";
import PropTypes from "prop-types";
import firebase from "Firebase"

import TableDropdown from "components/Dropdowns/TableDropdown.js";

// Todo: Make this more module through adding component/variable for each cell

export default function MyCreditLog({ color }) {

  const [creditData, setCreditData] = useState([]);
  
  useEffect(() => {
    let ref = firebase.database().ref("/creditlogs/"+firebase.auth().currentUser.uid)
    console.log(firebase.auth().currentUser.uid)
    ref.on("value", snapshot => {
      const state = snapshot.val()
      setCreditData(Object.values(state))
      console.log(state)
    })
  }, [])

  return (
    <>
      <div
        className={
          "relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded " +
          (color === "light" ? "bg-white" : "bg-blue-900 text-white")
        }
      >
        <div className="rounded-t mb-0 px-4 py-3 border-0">
          <div className="flex flex-wrap items-center">
            <div className="relative w-full px-4 max-w-full flex-grow flex-1">
              <h3
                className={
                  "font-semibold text-lg " +
                  (color === "light" ? "text-gray-800" : "text-white")
                }
              >
                My Credit Log
              </h3>
            </div>
          </div>
        </div>

        <div className="block w-full overflow-x-auto">
          {/* Projects table */}
          <table className="items-center w-full bg-transparent border-collapse">
            <thead>
              <tr className="overflow-x-hidden">
                <th
                  className={
                    "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
                    (color === "light"
                      ? "bg-gray-100 text-gray-600 border-gray-200"
                      : "bg-blue-800 text-blue-300 border-blue-700")
                  }
                >
                  Date
                </th>
                <th
                  className={
                    "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
                    (color === "light"
                      ? "bg-gray-100 text-gray-600 border-gray-200"
                      : "bg-blue-800 text-blue-300 border-blue-700")
                  }
                >
                  Time In
                </th>
                <th
                  className={
                    "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
                    (color === "light"
                      ? "bg-gray-100 text-gray-600 border-gray-200"
                      : "bg-blue-800 text-blue-300 border-blue-700")
                  }
                >
                  Time Out
                </th>
                <th
                  className={
                    "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
                    (color === "light"
                      ? "bg-gray-100 text-gray-600 border-gray-200"
                      : "bg-blue-800 text-blue-300 border-blue-700")
                  }
                >
                  Type
                </th>
                <th
                  className={
                    "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
                    (color === "light"
                      ? "bg-gray-100 text-gray-600 border-gray-200"
                      : "bg-blue-800 text-blue-300 border-blue-700")
                  }
                >
                  Description
                </th>
                <th
                  className={
                    "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " +
                    (color === "light"
                      ? "bg-gray-100 text-gray-600 border-gray-200"
                      : "bg-blue-800 text-blue-300 border-blue-700")
                  }></th>
              </tr>
            </thead>


            <tbody>
              {/* loop through fetched credit data and add rows */}
            {creditData.map((credit, index) => {
              return (<tr key={index}>
              <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center">
              {credit.date}
              </th>
              <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
               {credit.timeIn}
              </td>
              <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
              {credit.timeOut}
              </td>
              <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
              {credit.type}
              </td>
              <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
              {credit.description}
              </td>
              <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right">
                <TableDropdown />
              </td>
            </tr>)
            })}

            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

MyCreditLog.defaultProps = {
  color: "light",
};

MyCreditLog.propTypes = {
  color: PropTypes.oneOf(["light", "dark"]),
};

Answer 1

多么愚蠢的问题。我从每个元素中删除了“whitespace-no-wrap”类，它运行良好。