如何使一个元素跨越 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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>{`Courses Taught By ${this.state.professorname}`}</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>{`Comments on Course`}</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.courses.map((course, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr key={course._id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Link to={`/${this.state.id}/${course._id}`}>{course.name</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.comments[i].map((comment, j) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p key={j}>{this.state.comments[i][j]}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tbody>&nbsp; &nbsp; </Table>

Answer 2

修复嵌套的 tr<Table striped bordered hover>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>{`Courses Taught By ${this.state.professorname}`}</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>{`Comments on Course`}</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.courses.map((course, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td key={course._id}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to={`/${this.state.id}/${course._id}`}>{course.name}</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.comments[i].map((comment, j) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td key={j}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{this.state.comments[i][j]}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;))}&nbsp; &nbsp; &nbsp;</tr>&nbsp;</Table>还有其他选项也可以使用 colspan 或者只是将注释添加到 td 作为 p 标签并在 css 中设置样式 这是使用 p 标签的另一个解决方案：替换这个：<table>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.comments[i].map((comment, j) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td key={j}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{this.state.comments[i][j]}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;))}&nbsp; &nbsp; &nbsp;</tr></table>对此：{this.state.comments[i].map((comment, j) => (&nbsp; &nbsp; <p key={j}>{this.state.comments[i][j]}</p>))}只需使用 css 对其进行样式设置

Answer 3

为此，您需要使用元素的colspan属性。td例如，如果您具有以下结构：<table>&nbsp; <tr>&nbsp; &nbsp; <td>Name</td>&nbsp; &nbsp; <td>Last Name</td>&nbsp; &nbsp; <td>Actions</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td colspan="2">John Doe</td>&nbsp; &nbsp; <td></td>&nbsp; </tr></table>John Doe td 将占据先前td元素创建的 2 列。