Menu
I have a table with one tr & 2 tds. The 2 td's have tables. There is space between the 2 inner tables, which I don't want. Can someone suggest me how to remove this spacing. Here is my mark up:
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>
645
The space between the table cells is controlled by the CELLSPACING attribute in the TABLE tag. By setting CELLSPACING to zero, you can remove all the space between the cells of your table.
The space between two rows in a table can be done using CSS border-spacing and border-collapse property. The border-spacing property is used to set the spaces between cells of a table and border-collapse property is used to specify whether the border of table is collapse or not.
This is a Default behavior of the table cells that there is some space between their Borders. To remove this space we can use the CSS border-collapsing Property. This Property is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.
The space between two rows in a <table> can be added by using the CSS border-spacing and border-collapse properties. The border-spacing property is used to set the spaces between cells of a table, and the border-collapse property specifies whether the border of the table is collapsed or not.
You need to set the padding of the cells themselves to 0. They do not inherit the padding of the table element.
<table style="border-spacing: 0; border-width: 0; padding: 0; border-width: 0;">
<tr>
<td style="padding-right: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td style="padding-left: 0px;">
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
You can simple use:
table {
border-collapse: collapse;
}
table{
border-collapse: collapse;
}<table>
<tr>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table1">
<tr>
<td>Subscriber Name: </td>
<td>
<input type="text" id="Text1" /></td>
</tr>
<tr>
<td>Subscriber Id: </td>
<td>
<input type="text" id="Text2" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button1" /></td>
</tr>
</table>
</td>
<td>
<table width="100%" style="border-radius: 10px; border: 1px solid grey; width: 100%; border-collapse: initial;" id="Table2">
<tr>
<td>Admin Name: </td>
<td>
<input type="text" id="Text3" /></td>
</tr>
<tr>
<td>Admin Id:</td>
<td>
<input type="text" id="Text4" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Button2" /></td>
</tr>
</table>
</td>
</tr>
</table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
