如何删除表格单元格之间的空格

Question

As you can see under 2nd row of my table between two cells there is a space which I want to remove but I am not sure how to achieve that.

Any help or suggestion will appreciated.Thanks

 var str1 = "78896541230"; str1 = str1.replace(/.(?=.{4})/g, 'x'); document.getElementById('output').innerHTML = str1;

 <table border="0" cellspacing="0" cellpadding="1" class="formtable"> <caption>Just for fun</caption> <tr> <td>The following will contain masked input number </td> <td id="output"></td> </tr> <tr> <td> If it is not masked number, then something is wrong.</td> </tr> </table>

Answer 1

<table border="0" cellspacing="0" cellpadding="1" class="formtable">
    <tr>
      <td>The following will contain masked input number </td>
      <td id="output">XXXXXXX0230</td>
    </tr>
    <tr>
      <td colspan="2"> If it is not masked number, then something is wrong.</td>
    </tr>
</table>

The white space between the text and the 'output' number is being caused by the longer text in the second row. This causes the first column of the first row stretch. You're also nesting <tr> elements which you shouldn't.

You could add a colspan="2" to the <td> in the second row.

Answer 2

You can use the cell spacing and cell padding attribute in html 5 And set their values to 0 or -1

Answer 3

The answer stated above is all good unless the text in second <td> element increases.I have found a better solution which does work in my case. Instead of putting the value of #output in another <td> i can inline that in the previous <td> and that way the space won't be there. Here's how

Code

 var str1 = "78896541230"; str1 = str1.replace(/.(?=.{4})/g, 'x'); document.getElementById('output').innerHTML = str1;

 <table border="0" cellspacing="0" cellpadding="1" class="formtable"> <caption>Just for fun</caption> <tr> <td>The following will contain masked input number <strong id="output"></strong></td> </tr> <tr> <td> If it is not masked number, then something is wrong.</td> </tr> </table>