时间戳

首页 > 解决方案 > 如何使一个元素跨越 React Table 中的整个单元格

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

问题描述

嗨，我想让我的 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>

我真的很感激一些帮助，因为这个困扰了我这么久。谢谢。

标签： javascripthtmlcssreactjs

解决方案

修复嵌套的 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 对其进行样式设置

推荐阅读