英文:
How to create nested columns in React Bootstrap Table
问题
我正在使用React Bootstrap表格这里。
您可以在此处查看工作代码
我想创建一个看起来像这样的表格。
我的数据如下：
const data = [
{
rollId: 1,
name: "Momo",
marks: {
maths: 30,
english: 24,
science: 50,
arts: 10
},
age: 14
},
{
rollId: 2,
name: "Sana",
marks: {
maths: 30,
english: 24,
science: 50,
arts: 10
},
age: 14
},
{
rollId: 3,
name: "Mark",
marks: {
maths: 30,
english: 24,
science: 50,
arts: 10
},
age: 14
}
]
我已经使用了以下代码：
<Table
striped
bordered
hover
responsive
bgcolor="white"
size="lg"
style={{ opacity: "0.8" }}
>
<thead
style={{ backgroundColor: "#198754" }}
className="text-white"
>
<tr>
<th rowSpan={2}>ROll ID</th>
<th rowSpan={2}>Name</th>
<th rowSpan={2} colSpan={4}>
<tr>
<th colSpan={4}>Marks</th>
</tr>
<tr>
<th rowSpan={1}>Maths</th>
<th rowSpan={1}>English</th>
<th rowSpan={1}>Science</th>
<th rowSpan={1}>Arts</th>
</tr>
</th>
<th rowSpan={2}>Age</th>
</tr>
</thead>
<tbody>
{data.map((dat) => {
return (
<tr key={dat.rollId}>
<td key={dat.rollId}>{dat.rollId}</td>
<td>{dat.name}</td>
<td>{dat.marks.maths}</td>
<td>{dat.marks.english}</td>
<td>{dat.marks.science}</td>
<td>{dat.marks.arts}</td>
<td >{dat.age}</td>
</tr>
);
})}
</tbody>
</Table>
但它没有显示4列中的科目。请帮助我创建这个表格。
英文:
I am using react bootstrap table here
You can see the working code here
I wanted to created a table which looks like this .
My data looks like this
const data = [
{
rollId: 1,
name:"Momo",
marks: {
maths: 30,
english:24,
science:50,
arts:10
},
age:14
},
{
rollId: 2,
name:"Sana",
marks: {
maths: 30,
english:24,
science:50,
arts:10
},
age:14
},
{
rollId: 3,
name:"Mark",
marks: {
maths: 30,
english:24,
science:50,
arts:10
},
age:14
}
]
I had used the following Code
<Table
striped
bordered
hover
responsive
bgcolor="white"
size="lg"
style={{ opacity: "0.8" }}
>
<thead
style={{ backgroundColor: "#198754" }}
className="text-white"
>
<tr>
<th rowSpan={2}>ROll ID</th>
<th rowSpan={2}>Name</th>
<th rowSpan={2} colSpan={4} >
<tr>
<th colSpan={4}>Marks</th>
</tr>
<tr>
<th rowSpan={1}>Maths</th>
<th rowSpan={1}>English </th>
<th rowSpan={1}>Science</th>
<th rowSpan={1}>Arts</th>
</tr>
</th>
<th rowSpan={2}>Age</th>
</tr>
</thead>
<tbody>
{data.map((dat) => {
return (
<tr key={dat.rollId}>
<td key={dat.rollId}>{dat.rollId}</td>
<td>{dat.name}</td>
<td>{dat.marks.maths}</td>
<td>{dat.marks.english}</td>
<td>{dat.marks.science}</td>
<td>{dat.marks.arts}</td>
<td >{dat.age}</td>
</tr>
);
})}
</tbody>
</Table>
But it is not showing the subjects in 4 columns. Please help me to create this table
答案1
得分: 1
抱歉回复晚了，也许你现在已经找到了解决方案。就代码而言，我已经快速复制了表格，并使用以下HTML代码成功运行：
基本上，您可以使用colgroup标签将多个列分组在一起，然后在标题列中使用这些分组，如下所示。希望这有意义。
<table class="table table-primary table-striped-columns">
<colgroup span="4"></colgroup>
<thead>
<tr>
<th rowspan="2">ROll ID</th>
<th rowspan="2">Name</th>
<th colspan="4" scope="colgroup">Marks</th>
</tr>
<tr>
<th scope="col">Maths</th>
<th scope="col">English</th>
<th scope="col">Science</th>
<th scope="col">Arts</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>5</td>
<td>10</td>
<td>3</td>
<td>7</td>
</tr>
</tbody>
</table>
以下是显示其外观的图像：
英文:
Sorry for the overdue reply, you might have come up with a solution by now. For what it is worth, I have replicated the table quickly and it worked using the HTML code below:
Essentially, you use the colgroup tag to group a number of columns together which then you will use in the header column as shown below. Hope it makes sense.
<table class="table table-primary table-striped-columns">
<colgroup span="4"></colgroup>
<thead>
<tr>
<th rowspan="2">ROll ID</th>
<th rowspan="2">Name</th>
<th colspan="4" scope="colgroup">Marks</th>
</tr>
<tr>
<th scope="col">Maths</th>
<th scope="col">English</th>
<th scope="col">Science</th>
<th scope="col">Arts</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>5</td>
<td>10</td>
<td>3</td>
<td>7</td>
</tr>
</tbody>
</table>
An image that shows how it looks:
答案2
得分: 0
尝试使用属性'colspan'，并创建一个位于其下方的额外行，例如：
<th rowSpan={2} colspan={4}>分数</th>
<tr>
<td>数学</td>
<td>英语</td>
<td>科学</td>
<td>艺术</td>
</tr>
英文:
Try using the attribute 'colspan' and create an additional row that will be below it e.g:
<th rowSpan={2} colspan={4} >Marks</th>
<tr>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>Arts</td>
</tr>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论