It is the expected result and working fine in chrome.
But It broke in safari
JS Fiddle: https://jsfiddle.net/evpb3zLa/
<tbody>
<tr>
<td rowspan="6">6</td>
<td rowspan="6">6</td>
<td rowspan="2">2</td>
<td rowspan="3">3</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
</tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2" colspan="3">2</td>
</tr>
</tbody>
</table>
Didn't found any solution on safari rowspan problem, but ended up using nested tables. That works like a charm xD.
table, td, th {
border: 1px solid;
border-collapse: collapse;
padding: 5px;
}
<table>
<tbody>
<tr>
<td rowspan="6">6</td>
<td rowspan="6">6</td>
<td rowspan="2">
<table class="sub-table">
<tbody>
<tr>
<td>fixed-1</td>
</tr>
<tr>
<td>fixed-2</td>
</tr>
<tr>
<td>fixed-3</td>
</tr>
</tbody>
</table>
</td>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="3">3</td>
</tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
Related
I have two tables. One with additional invisible <td> and one without. The problem is that the second table's rowspan is not working, the entire row just collapses. How could I get the result like in the first table without adding that unnecessary <td>?
HTML:
.table-height td {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
<td className='invisible'></td>
</tr>
<tr>
<td className='invisible'></td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td className='invisible'></td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td className='invisible'></td>
</tr>
</tbody>
</table>
</p>
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>
Finally I got it right. I just need to set the height for <tr> too (same as for </td>)
.table-height td, tr {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>
I'm trying to get an HTML table that looks like the following:
I currently am trying to use the following markup to get this (basically, I multiplied 4 and 6 together to get 24 and used common factors to try to get what I wanted):
<table>
<tbody>
<tr>
<td rowspan="24">1</td>
<td rowspan="4">2</td>
<td rowspan="6">3</td>
</tr>
<tr>
<td rowspan="4">4</td>
<td rowspan="6">5</td>
</tr>
<tr>
<td rowspan="4">6</td>
<td rowspan="6">7</td>
</tr>
<tr>
<td rowspan="4">8</td>
<td rowspan="6">9</td>
</tr>
<tr>
<td rowspan="4">10</td>
</tr>
<tr>
<td rowspan="4">11</td>
</tr>
</tbody>
</table>
However, the above markup doesn't accomplish what I want at all.
Is it possible to get a table like the one shown above using rowspan?
If not with rowspan, are there other ways to get the table above in HTML?
Thanks.
You can achieve the same using following html structure
<table border="1" cellspacing="0" cellpadding="20">
<tbody>
<tr>
<td rowspan="24">1</td>
<td rowspan="4">2</td>
<td rowspan="6">3</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">4</td>
</tr>
<tr></tr>
<tr>
<td rowspan="6">7</td>
</tr>
<tr></tr>
<tr>
<td rowspan="4">6</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">8</td>
<td rowspan="6">7</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">10</td>
</tr>
<tr></tr>
<tr>
<td rowspan="6">9</td>
</tr>
<tr></tr>
<tr>
<td rowspan="4">11</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
Try this out...
table {
border-collapse: collapse;
border-spacing: 0;
}
table td {
width:60px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
border-color: black;
}
table th {
width:60px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
border-color: black;
}
table th {
text-align: left
}
<table class="tg">
<tr>
<th rowspan="12">1</th>
<th rowspan="2">2</th>
<th rowspan="3">3</th>
</tr>
<tr> </tr>
<tr>
<td rowspan="2">4</td>
</tr>
<tr>
<td rowspan="3">5</td>
</tr>
<tr>
<td rowspan="2">6</td>
</tr>
<tr> </tr>
<tr>
<td rowspan="2">7</td>
<td rowspan="3">8</td>
</tr>
<tr> </tr>
<tr>
<td rowspan="2">9</td>
</tr>
<tr>
<td rowspan="3">10</td>
</tr>
<tr>
<td rowspan="2">11</td>
</tr>
</table>
For the following table structure table border is showing in some browsers, and in some browsers it is not showing.
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
border-bottom:0px !important;
}
<table class="test-table">
<tbody>
<tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="2" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody>
</table>
See the below screenshot of table in browsers:
Firefox table
Chrome table
The Firefox table structure is the correct structure, but in Chrome it is not showing properly. What is wrong in this code? How to make the table structure same in every browser?
Set rowspan=4 for that Cell like below
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
}
<table class="test-table">
<tbody><tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="4" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody></table>
Here is the solution might be it help.
You have to add rowspan=4
Here is the example
What I would like to do:
What did I wrote:
<table>
<TR>
<TD ROWSPAN="4">left</TD>
<TD ROWSPAN="12">middle</TD>
<TD ROWSPAN="3">right</TD>
</TR>
<TR>
<TD ROWSPAN="4">left2</TD>
<TD ROWSPAN="3">right2</TD>
</TR>
<TR>
<TD ROWSPAN="4">left3</TD>
<TD ROWSPAN="3">right3</TD>
</TR>
<TR>
<TD ROWSPAN="3">right4</TD>
</TR>
</table>
It turns out with this:
I would like the table have same height, I can work in this way, but it is not the same height:
<table>
<TR>
<TD>left</TD>
<TD ROWSPAN="12">middle</TD>
<TD>right</TD>
</TR>
<TR>
<TD>left2</TD>
<TD>right2</TD>
</TR>
<TR>
<TD>left3</TD>
<TD>right3</TD>
</TR>
<TR>
<TD>right4</TD>
</TR>
</table>
and the result like this:
Got it! The trick was having a total of twelve <tr>s, even though some of them are empty.
As a point of curiosity, I solved this by making the table in excel, saving as html, and deleting all of the inline styles that excel puts in there.
td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=4>left</td>
<td rowspan=12>middle</td>
<td rowspan=3>right</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right2</td>
</tr>
<tr>
<td rowspan=4>left2</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right3</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=4>left3</td>
</tr>
<tr>
<td rowspan=3>right4</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO