html 如何解决< div>无法显示为< table>[重复]的子项的问题

nx7onnlm 于 2023-05-15 发布在其他

关注(0)|答案(2)|浏览(124)

此问题已在此处有答案：

How do browsers analyze without ?（1个答案）
5天前关闭。
我有嵌套的问题，我该如何解决这个问题？
我尝试将div改为tbody，td，th，tr，但不知道如何将它们合并
React：

return (
<div key={data.name}>
  {tournaments.map((data, i) => (
    <div className="table-card" key={i}>
      <div className="accordion" onClick={() => toggle(i)}>
        <div className="wrapper">
          <div className="title-wrapper">
            <div className="name">{data.name}</div>
            <div className="type">{data.type}</div>
          </div>
          <div className="time-wrapper">
            <div className="time">{data.time}</div>
            <div className="date">{data.data}</div>
          </div>
        </div>

        <div className={selected === i ? 'content show' : 'content'}>
          <tr className="buy-in-usd">
            BUY-IN USD: <span>{data.buyUSD}</span>
          </tr>
          <tr className="gtd">
            GTD: <span>{data.gtd}</span>
          </tr>
          <tr className="clubId">
            CLUB ID: <span>{data.clubId}</span>
          </tr>
          <tr className="application">
            APPLICATION: <span>{data.application}</span>
          </tr>
          <tr className="lateRegistration">
            LATE REGISTRATION: <span>{data.lateRegistration}</span>
          </tr>
        </div>
      </div>
    </div>
  ))}
</div>
)

CSS：

table {
    margin-right: auto;

    ul {
      padding: 0;
    }

    .table-card {
      display: block;
      position: relative;
      justify-content: flex-start;
      width: 440px;
      flex-direction: row;
      border-top: 2px solid #979797;
      margin-top: 20px;
      cursor: pointer;

      .heart {
        position: absolute;
        z-index: 20;
        margin-left: 400px;
        margin-top: 44px;
      }

      .wrapper {
        display: flex;
        position: relative;
      }

      .accordion {
        width: 440px;
      }

      .overlay {
        width: 40px;
        height: 40px;
      }

      .content {
        font-size: 18px;
        text-transform: uppercase;
        color: #EBB543;
        overflow: hidden;
        max-height: 0;
        transition: all 0.3s;

        .buy-in-usd {
          padding-left: 6px;
          margin-top: 20px;
        }

        .gtd, .clubId, .application, .lateRegistration {
          padding-top: 6px;
          padding-left: 6px;
        } :last-child {
          padding-bottom: 6px;
        }

        span {
          color: #FFFFFF;
        }
      }

      .content.show {
        height: auto;
        max-height: 9999px;
        transition: all 0.5s cubic-bezier(1, 0, 1, 0);
      }

      .name {
        padding-top: 6px;
        padding-left: 6px;
        font-size: 16px;
        border: 0;
      }

      .type {
        padding-top: 14px;
        padding-left: 6px;
        padding-bottom: 6px;
        font-size: 16px;
        border: 0;
      }

      .date {
        padding-top: 6px;
        padding-right: 6px;
        font-size: 16px;
        border: 0;
      }

      .time {
        padding-top: 6px;
        padding-right: 16px;
        font-size: 16px;
        border: 0;
      }

      .buy-in-usd, .gtd, .clubId, .application, .lateRegistration {
        border: 0;
      }
    }

    td {
      padding: 0 4px 0 4px;
    }
  }

x1c 0d1x <---主要问题
需要这样：

点击打开：

Html

来源：https://stackoverflow.com/questions/72521905/how-to-fix-problem-with-div-cannot-appear-as-a-child-of-table

2条答案

按热度按时间

13z8s7eq1#

我想你是react的新手。但是要进入react的世界，我们必须至少了解HTML的基础知识，甚至更多。回答你的问题：tr标记不能在table标记之外使用。因此，您必须将tr标记 Package 在table标记中。

<div>
   <tr> ... </tr>
 </div>

应该是这样的

<table>
    ...
    <tr> ... </tr>
    ...
  </table>

最好使用一个无序的HTML列表来获得你想要实现的目标。
Codesandbox

App.js

import { useState } from "react";
import "./styles.css";

const tournaments = [
  {
    name: "300 Daily",
    type: "PKO",
    time: "13:30",
    details: {
      buyInUsd: "$10,00",
      gtd: "$300,00",
      clubId: "2569999",
      application: "PPPOKER",
      lateRegistration: 2
    }
  },
  {
    name: "1K Deep Stack",
    type: "KO",
    time: "14:30",
    details: {
      buyInUsd: "$30,00",
      gtd: "$200,00",
      clubId: "4569569",
      application: "PPPOKER",
      lateRegistration: 1
    }
  }
];

const Tournament = ({ tournament }) => {
  const [show, setShow] = useState(false);
  const { details } = tournament;

  return (
    <li
      className="tournament"
      onClick={() => setShow((prevState) => !prevState)}
    >
      <div className="tournament-title">
        <span className="tournament-name">{tournament.name}</span>
        <span className="tournament-time">{tournament.time}</span>
      </div>
      <div className="tournament-type">{tournament.type}</div>
      <div className={`tournament-details ${show ? "show" : "hide"}`}>
        <div className="tournament-detail">
          BUY-IN USD: <span>{details.buyInUsd}</span>
        </div>
        <div className="tournament-detail">
          GTD: <span>{details.gtd}</span>
        </div>
        <div className="tournament-detail">
          CLUB ID: <span>{details.clubId}</span>
        </div>
        <div className="tournament-detail">
          APPLICATION: <span>{details.application}</span>
        </div>
        <div className="tournament-detail">
          LATE REGISTRATION:
          <span> {details.lateRegistration}</span>
        </div>
      </div>
    </li>
  );
};

export default function App() {
  return (
    <div className="App">
      <ul className="tournaments">
        {tournaments.map((tournament, i) => (
          <Tournament tournament={tournament} key={i} />
        ))}
      </ul>
    </div>
  );
}

styles.css

html,
.body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: black;
}

.tournaments {
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tournament {
  min-height: 60px;
  border-top: 2px solid gray;
  padding: 12px 8px 0;
  cursor: pointer;
}

.tournament-details {
  height: 150px;
}

.tournament-detail {
  color: gold;
}

.tournament-detail > span {
  color: white;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.tournament-title {
  height: 30px;
  width: 100%;
}

.tournament-name {
  float: left;
}

.tournament-time {
  float: right;
}

.tournament-type {
  height: 30px;
  width: 100%;
  float: left;
}

赞(0）回复(0）举报 2023-05-15

iugsix8n2#

这里缺少<table>元素。这应该是 Package 表行tr元素的父元素。在<tr>之前添加<table>

赞(0）回复(0）举报 2023-05-15