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
Related
I have a table.
<table style="margin-left: 20px" class="tg">
<tbody>
<tr>
<td class="tg- 0lax">Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
I want the margin between the question 1 and the answer 1 2px. And the margin between the answer 1 and question 2 , 10 px. I cant get i done. I did try the following things: style="margin-bottom / margin-top in the and , al well as padding 2px. But both doesnt work
<td></td> and <tr></tr> cant be given a margin. Although you can give them a padding when you set display: block; Then you can go on an set things like every second one should get a bigger padding at the bottom (as you wanted it). Here is a snippet with very basic styles:
tr {
display: block;
}
tr:nth-child(even) {
padding-bottom: 20px;
}
tr:nth-child(odd) {
padding-bottom: 2px;
}
<table>
<tbody>
<tr>
<td>Question 1</td>
</tr>
<tr>
<td>Answer 1</td>
</tr>
<tr>
<td>Question 2</td>
</tr>
<tr>
<td>Answer 2</td>
</tr>
</tbody>
</table>
Set border-spacing property 2px to the table, and then skip 5 rows to get 10px something like this:
<table style="margin-left: 20px;border-spacing: 2px;" class="tg">
<tbody>
<tr>
<td class="tg- 0lax" >Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
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>
I'm trying to create a HTML table like in this image;
I tried the following but it did not work.
<table border="1">
<tr>
<th rowspan="2" colspan="2">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>
You can try this:
table {
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid;
}
<table>
<col width=100><col width=100><col width=100>
<tr>
<td colspan="2" style="border-bottom: none;">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td colspan="2" style="border-top: none;"></td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>
hi your code is good just add with to see the difference
<table border="1">
<tr>
<th rowspan="2" colspan="2" style="width: 95px;">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td style="width: 20px;">1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>
This is how you could build the table in your picture by using rowspan and colspan:
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
width: 33%;
}
<table>
<tr>
<td colspan="2" rowspan="2">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>
I want to make this template with html tables,
This is my html code
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</td>
<td>data</td>
</tr>
</table>
But it is not giving me the right format like the image above. How can i do it with table?
For the template as per the reference, you need to use this code
table { border: 1px solid #000; border-collapse: collapse; }
table th { padding: 5px 10px; border: 1px solid #000; }
table td { padding: 5px 10px; border-left: 1px solid #000; border-right: 1px solid #000; }
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th rowspan="2">Sr. No.</th>
<th rowspan="2">Description of Goods</th>
<th rowspan="2">HSN</th>
<th rowspan="2">Qty.</th>
<th rowspan="2">Unit</th>
<th rowspan="2">Rate (per item)</th>
<th rowspan="2">Total</th>
<th rowspan="2">Discount</th>
<th rowspan="2">Taxable Value</th>
<th colspan="2" align="center">CGST</th>
<th colspan="2" align="center">SGST</th>
<th colspan="2" align="center">IGST</th>
</tr>
<tr>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Several ways to do this. You could use a table in a td or you could make use of colspan and rowspan like in my example.
Good luck.
table {
border-collapse: collapse;
height: 100px;
font-size: 10px;
text-align: center;
}
td {
padding: 5px;
border: solid 1px black;
}
<table>
<tr>
<td rowspan=2>Sr.No</td>
<td rowspan=2>Description of Goods</td>
<td rowspan=2>HSN</td>
<td rowspan=2>Qty.</td>
<td rowspan=2>Unit</td>
<td rowspan=2>Rate(per item)</td>
<td rowspan=2>Total</td>
<td rowspan=2>Discount</td>
<td rowspan=2>Taxable value</td>
<td colspan=2>CGST</td>
<td colspan=2>SGST</td>
<td colspan=2>IGST</td>
</tr>
<tr>
<td>Rate</td>
<td>Amt.</td>
<td>Rate</td>
<td>Amt.</td>
<td>Rate</td>
<td>Amt.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
It is called as Table with Irregular Headers
You have to use
<th colspan="2" scope="colgroup">MainHeadername</th>
for main Header and
<th scope="col">SubHeaderName</th>
for Sub Headers
This Reference will be Helpful for further clarifications
https://www.w3.org/WAI/tutorials/tables/irregular/
You can do this using colspan:
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<th>65</th>
<th>80</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
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>