CODEWITHSUNDEEP
javascripthtml
Saurav
Saurav

Reputation: 47

How to remove spaces between table cells

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>

Upvotes: 0

Views: 237

Answers (3)

Saurav
Saurav

Reputation: 47

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>

Upvotes: 0

Rick Doesburg
Rick Doesburg

Reputation: 663

<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.

Upvotes: 2

Abdul Wasay
Abdul Wasay

Reputation: 5

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

Upvotes: 0

Related Questions