如何使一个元素跨越 React Table 中的整个单元格

Question

我想让我的 td 元素标签占据属于该列的整个单元格。这是我到目前为止得到的输出：基本上，我希望“独立研究”占据第一栏。到目前为止，这是我的代码：                   <Table striped bordered hover>                        <thead>                            <tr>                                <th>{`Courses Taught By ${this.state.professorname}`}</th>                                <th>{`Comments on Course`}</th>                            </tr>                        </thead>                        <tr>                            {this.state.courses.map((course, i) => (                            <tr>                                <td key={course._id}>                                    <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>                                </td>                                {this.state.comments[i].map((comment, j) => (                                    <td key={j}>                                        <p>{this.state.comments[i][j]}</p>                                    </td>                                ))}                            </tr>                            ))}                        </tr>                    </Table>我真的很感激一些帮助，因为这个困扰了我这么久。谢谢。

Answer 1

你基本上有一个两列表，但如果没有评论，你的逻辑是不呈现第二列。您需要做的就是将第二个移出地图。这样，如果表格单元格为空，您可以保留它。您还嵌套了无效的 tr > tr，我将包装 tr 更改为 tbody。最后，键应该在该行的 tr 上，而不是在第一列的 td 上。希望这可以帮助。

<Table striped bordered hover>

         <thead>

               <tr>

                   <th>{`Courses Taught By ${this.state.professorname}`}</th>

                   <th>{`Comments on Course`}</th>

               </tr>

         </thead>

         <tbody>

               {this.state.courses.map((course, i) => (

                   <tr key={course._id}>

                        <td>

                             <Link to={`/${this.state.id}/${course._id}`}>{course.name</Link>                  

                        </td>

                        <td>

                        {this.state.comments[i].map((comment, j) => (

                             <p key={j}>{this.state.comments[i][j]}</p>

                        ))}

                        </td>

                   </tr>

                ))}

         </tbody>

    </Table>

Answer 2

修复嵌套的 tr

<Table striped bordered hover>

    <thead>

        <tr>

            <th>{`Courses Taught By ${this.state.professorname}`}</th>

            <th>{`Comments on Course`}</th>

        </tr>

    </thead>

        {this.state.courses.map((course, i) => (

            <tr>

                <td key={course._id}>

                    <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>

                </td>

                <td>

                    <table>

                        <tr>

                            {this.state.comments[i].map((comment, j) => (

                                <td key={j}>

                                    <p>{this.state.comments[i][j]}</p>

                                </td>

                            ))}

                        </tr>

                    </table>

                 </td>

             </tr>

         ))}

     </tr>

 </Table>

还有其他选项也可以使用 colspan 或者只是将注释添加到 td 作为 p 标签并在 css 中设置样式 这是使用 p 标签的另一个解决方案：

替换这个：

<table>

    <tr>

        {this.state.comments[i].map((comment, j) => (

            <td key={j}>

                <p>{this.state.comments[i][j]}</p>

            </td>

         ))}

     </tr>

</table>

对此：

{this.state.comments[i].map((comment, j) => (

    <p key={j}>{this.state.comments[i][j]}</p>

))}

只需使用 css 对其进行样式设置

Answer 3

为此，您需要使用元素的colspan属性。td

例如，如果您具有以下结构：

<table>

  <tr>

    <td>Name</td>

    <td>Last Name</td>

    <td>Actions</td>

  </tr>

  <tr>

    <td colspan="2">John Doe</td>

    <td></td>

  </tr>

</table>

John Doe td 将占据先前td元素创建的 2 列。