Question 44791 in Html Question posted in
Some basic documentation can be found here.

How to create nested columns in React Bootstrap Table – Html

I am using react bootstrap table here

You can see the working code here

I wanted to created a table which looks like this .

enter image description here
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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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:

    An image that shows how it looks

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search