The inner table provides a slight padding of 1-2 pixels on its left side

Question

The inner table provides a slight padding of 1-2 pixels on its left side

Consider a scenario where there is a table:

 <table>
      <tr>
         <td>
            Hello How are you this is a TEST!
         </td>
      <tr>
      <tr>
          <td>
              <table>
                  <tr>
                     <td>
                         Hello this a test 2!
                     </td>
                  </tr>
              </table>
          <td>
      <tr>
 </table>

In this illustration, there is only one TD in the main table, yet three TDs are needed in the child table. Following the above structure results in output like this:

 Hello How are you this is a TEST!
  Hello this is Test 2!

However, the inner table introduces a padding-left of approximately 1-2 pixels. Is there a method to align both statements perfectly?

html css html-table

Answer 1

Answer №1

Make sure to collapse your borders and eliminate cell padding. Additionally, double check that all td and tr tags are properly closed.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

table {
  border-collapse: collapse;
}

table td {
 padding: 0;
}

<table>
      <tr>
         <td>
            Hello How are you this is a TEST!
         </td>
      </tr>
      <tr>
          <td>
              <table>
                  <tr>
                     <td>
                         Hello this a test 2!
                     </td>
                  </tr>
              </table>
          </td>
      </tr>
 </table>

Answer 2

Make sure to collapse your borders and eliminate cell padding. Additionally, double check that all td and tr tags are properly closed.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

table {
  border-collapse: collapse;
}

table td {
 padding: 0;
}

<table>
      <tr>
         <td>
            Hello How are you this is a TEST!
         </td>
      </tr>
      <tr>
          <td>
              <table>
                  <tr>
                     <td>
                         Hello this a test 2!
                     </td>
                  </tr>
              </table>
          </td>
      </tr>
 </table>

Answer 3

Answer №2

Of course! The extra space you're seeing is caused by a couple of things:

Table cells naturally have some space between them. To remove this gap and make the cells sit flush together, you can use border-collapse: collapse on the parent table element.
Additionally, table cells come with a default 1px of padding. You can eliminate this padding by setting td { padding: 0; }

table {
    border-collapse: collapse;
}

table td {
    padding: 0;
}

<table>
    <tr>
        <td>
            Hello! How are you? This is just a test.
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        Another example for testing purposes!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

If you want to see a visual demonstration, feel free to check out this JSFiddle.

Answer 4

Of course! The extra space you're seeing is caused by a couple of things:

Table cells naturally have some space between them. To remove this gap and make the cells sit flush together, you can use border-collapse: collapse on the parent table element.
Additionally, table cells come with a default 1px of padding. You can eliminate this padding by setting td { padding: 0; }

table {
    border-collapse: collapse;
}

table td {
    padding: 0;
}

<table>
    <tr>
        <td>
            Hello! How are you? This is just a test.
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        Another example for testing purposes!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

If you want to see a visual demonstration, feel free to check out this JSFiddle.

Answer 5

Answer №3

Give this a shot:

<style>
  table {
    border-spacing:0;

    }
  td {
    margin-left:0px;
    padding-left: 0px;
  }  
</style>

...

<table>
    <tbody>
        <tr>
            <td>
            Howdy! How's it going? Just testing some stuff here!
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>
                            Test test one two!
                           </td>
                        </tr>
                    </tbody>
                </table>
            </td>
       </tr>
   </tbody>
</table>

Answer 6

Give this a shot:

<style>
  table {
    border-spacing:0;

    }
  td {
    margin-left:0px;
    padding-left: 0px;
  }  
</style>

...

<table>
    <tbody>
        <tr>
            <td>
            Howdy! How's it going? Just testing some stuff here!
            </td>
        </tr>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>
                            Test test one two!
                           </td>
                        </tr>
                    </tbody>
                </table>
            </td>
       </tr>
   </tbody>
</table>

The inner table provides a slight padding of 1-2 pixels on its left side

Answer №1

Answer №2

Answer №3

Similar questions

Expanding min-content CSS Grid cell based on neighboring cells

How can Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

Ways to emphasize the current tab on the site's navigation bar?

Authenticating the Gmail API using a specified user ID

Utilizing the `theme` property in makeStyles with Material-UI

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Transforming ASCII Source Files into JPEG Images

"Looping through a list but skipping over a certain element in

Trouble with HTML5 Geolocation Functionality

jquery's each method is not functioning as intended and causing unexpected issues

Can you show me the procedure for retrieving a particular element with selenium? (Page Source provided)

CSS - turn off inheritance for font styling

Automate tasks without the need for a traditional form, simply using a text box and a

Is there a way to switch my image buttons to a different image when clicked?

Align the text characters vertically within a word or sentence

Designing a submenu with HTML and CSS

Setting up a PHP email form for offline use

When a table row is selected, set the OnClick attribute of an input to the value of the TD cell in that row based on

When using the `justify-content: flex-end` property, the `overflow: auto