CODEWITHSUNDEEP
html
Ganga
Ganga

Reputation: 923

Multiple row span in HTML data

I am trying to create a table similar to the one shown in the attached screenshot. Data for this table is coming through the python script, but I need some inputs on HTML side on how to create a table that can span through multiple rows

With my little knowledge on HTML, I tried creating the table with the following code, but it doesn't appear like its working as expected. It would be highly helpful if anyone can throw some light on what could be wrong here

table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}
<table style="width:100%">
  <table>
    <tr>
      <th>Project</th>
      <th>Environment</th>
      <th>Data1</th>
      <th>Multiple Data</th>
    </tr>
    <tr>
      <td rowspan="4">project1</td>
      <td rowspan="4">prod</td>
      <td rowspan="4">project1data</td>
      <td rowspan="4">project1 multi row data1</td>
      <td rowspan="4">project1 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project2</td>
      <td rowspan="4">stage</td>
      <td rowspan="4">project2data</td>
      <td rowspan="4">project2 multi row data1</td>
      <td rowspan="4">project2 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project3</td>
      <td rowspan="4">test</td>
      <td rowspan="4">project3data</td>
      <td rowspan="4">project3 multi row data1</td>
      <td rowspan="4">project3 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project4</td>
      <td rowspan="4">dev</td>
      <td rowspan="4">project4data</td>
      <td rowspan="4">project4 multi row data1</td>
      <td rowspan="4">project4 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project5</td>
      <td rowspan="4">qa</td>
      <td rowspan="4">project5data</td>
      <td rowspan="4">project5 multi row data1</td>
      <td rowspan="4">project5 multi row data2</td>
    </tr>

  </table>

enter image description here

Upvotes: 5

Views: 13991

Answers (6)

Anshul
Anshul

Reputation: 128

I think this will help you what you require

table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}
<table>
  <thead>
   <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data</th>
    <th>Multiple Data</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
    <td>
      <table>
        <tbody>
          <tr>
            <td>B1</td>
          </tr>
          <tr>
            <td>B2</td>
          </tr>
        </tbody>
      </table>
    </td>
   </tr>
  </tbody>
</table>

Upvotes: 1

Pankaja Gamage
Pankaja Gamage

Reputation: 304

Your approach was correct but the way you implemented it has a small mistake. I think this code will give you the proper way to address your problem. The code is pretty basic but will help you to understand how it works.

 <table>
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">Data 1</td>
                <td rowspan="4">Data 2</td>
            </tr>
            <tr>
                <td>Data 2.1</td>
            </tr>
            <tr>
                <td>Data 2.1</td>
            </tr>
            <tr>
                <td>Data 2.1</td>
            </tr>
        </tbody>
    </table>

Upvotes: 0

S Jayesh
S Jayesh

Reputation: 201

remove rowspan=4 for your multiple data column and add them to another <tr> with rowspan=1 after relative no. of empty divs.

Upvotes: 1

Mihir Bhende
Mihir Bhende

Reputation: 9045

Please check this :

Basically you can use simple <div> inside the td to accomplish this for 3rd table column.

https://jsfiddle.net/ryb0w54a/

table { border:1px solid #000;border-collapse:collapse;}
th {border:1px solid #000;}
td { border:1px solid #000;}
div { border-bottom : 1px solid #000}
div.last { border-bottom : 0;}
<table>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
<tr>
	<td>Project 1</td>
	<td>Env 1</td>
	<td>Project 1 Data</td>
	<td>
		<div>project1 multi row data1</div>
		<div>project1 multi row data2</div>
		<div class="last">project1 multi row data3</div>
	</td>
</tr>
<tr>
	<td>Project 1</td>
	<td>Env 1</td>
	<td>Project 1 Data</td>
	<td>
		<div>project1 multi row data1</div>
		<div>project1 multi row data2</div>
		<div class="last">project1 multi row data3</div>
	</td>
</tr>
</table>

Upvotes: 2

Sahil Dhir
Sahil Dhir

Reputation: 4240

You can do this simply without using rowspan and just adding another table in the last td where the multiple rows will come.

Here we go :

table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}

table tr td table {
  border: none;
}

table tr td table td {
  border-left: none;
  border-right: none;
}

table tr td table tr:first-child td {
  border-top: none;
}

table tr td table tr:last-child td {
  border-bottom: none;
}
<table>
  <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data1</th>
    <th>Multiple Data</th>
  </tr>
  <tr>
    <td>project1</td>
    <td>prod</td>
    <td>project1data</td>

    <td>
      <table>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <td>project2</td>
    <td>prod</td>
    <td>project1data</td>

    <td>
      <table>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>project3</td>
    <td>prod</td>
    <td>project1data</td>

    <td>
      <table>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
      </table>
    </td>
  </tr>

</table>

Upvotes: -1

Lajos Arpad
Lajos Arpad

Reputation: 76814

The mistake is that you have rowspan="4" even in the last td. You will need to avoid a rowspan there:

<table>
  <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data1</th>
    <th>Multiple Data</th>
  </tr>
  <tr>
    <td rowspan="3">project1</td>
    <td rowspan="3">prod</td>
    <td rowspan="3">project1data</td>
    <td>project1 multi row data1</td>
  </tr>
  <tr>
    <td>project1 multi row data2</td>
  </tr>
  <tr>
    <td>project1 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project2</td>
    <td rowspan="3">stage</td>
    <td rowspan="3">project2data</td>
    <td>project2 multi row data1</td>
  </tr>
  <tr>
    <td>project2 multi row data2</td>
  </tr>
  <tr>
    <td>project2 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project3</td>
    <td rowspan="3">test</td>
    <td rowspan="3">project3data</td>
    <td>project3 multi row data1</td>
  </tr>
  <tr>
    <td>project3 multi row data2</td>
  </tr>
  <tr>
    <td>project3 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project4</td>
    <td rowspan="3">dev</td>
    <td rowspan="3">project4data</td>
    <td>project4 multi row data1</td>
  </tr>
  <tr>
    <td>project4 multi row data2</td>
  </tr>
  <tr>
    <td>project4 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project5</td>
    <td rowspan="3">qa</td>
    <td rowspan="3">project5data</td>
    <td>project5 multi row data1</td>
  </tr>
  <tr>
    <td>project5 multi row data2</td>
  </tr>
  <tr>
    <td>project5 multi row data3</td>
  </tr>

</table>

Upvotes: 9

Related Questions