javascript - 下拉菜单未显示在表 : Tailwind, React

Question

嗨，我是 Tailwind 的新手。
我正在制作一个可见的下拉菜单，它位于表格单元格中，但它位于表格下方，不会溢出表格滚动条之外。我的表是一个水平滚动表。我给下拉z-index越多越好。但它不起作用。请帮忙。TableBody.jsx

import React from 'react';
import _ from 'lodash';
import TableCell from './tableCell';
import Popup from './popup';

const popupItems = [{ label: 'Edit'}, { label: 'Delete' }];

const TableBody = ({
  rows,
  hiddenColumns,
  checkedItems,
  addCheckedItem,
  removeCheckedItem,
}) => {
  const handleToggle = (event, checkedItem) => {
    if (event.target.checked) {
      addCheckedItem(checkedItem);
    } else {
      removeCheckedItem(checkedItem);
    }
  };

  return (
    <tbody>
      {rows.map((item, index) => (
        <tr key={index} className="hover:bg-gray-100 cursor-pointer">
          <td>
            <div className="relative">
              <Popup items={popupItems} />
            </div>
          </td>
          <TableCell value={index + 1} />
          {_.entries(item).map((pairs, value) => {
            if (hiddenColumns && !hiddenColumns.includes(pairs[0])) {
              return <TableCell key={value} value={pairs[1]} />;
            }
          })}
        </tr>
      ))}
    </tbody>
  );
};

export default TableBody;

Popup.jsx

import React from 'react';

const Popup = ({ items }) => {
  return (
    <div className="absolute left-0 bg-white p-2 mt-1 rounded-lg shadow-md border z-50">
      {items.map((item) => (
        <div
          key={item.label}
          className="bg-indigo-200"
        >
          <span className="px-3 align-middle text-xs">{item.label}</span>
        </div>
      ))}
    </div>
  );
};

export default Popup;

Answer 1

如果我正确理解了这个问题，那么您尝试创建的菜单会被滚动条 chop 吗？
您应该能够通过使用 overflow-visible 来解决该问题。整张 table 上。
https://tailwindcss.com/docs/overflow
主要问题不在于弹出窗口位于表格下方，而是表格的 div 会在其位于 div 之外时立即“切断”内容。