CODEWITHSUNDEEP
htmlcsshtml-table
Koosh
Koosh

Reputation: 896

Inner table adds 1-2 pixels of padding on the left

Let's say I have 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>

Just as an example, I have one TD in my main table, however I need to do 3 TD in my child table. If i do it as I shown above, it looks like this.

 Hello How are you this is a TEST!
  Hello this is a Test2!

The inner table gives me a padding-left of about 1-2 pixels. Is there any way to line up both statements?

Upvotes: 1

Views: 121

Answers (3)

Emilio Lucas Ceroleni
Emilio Lucas Ceroleni

Reputation: 1598

Try this:

<style>
  table {
    border-spacing:0;

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

...

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

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

Sure. That space is due to two factors:

  1. Table cells, by default, have space between them. To collapse cells together, you need to apply border-collapse: collapse to the parent table.

  2. Table cells have 1px of padding by default. You'll need to get rid of that by doing td { padding: 0; }

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>

If you'd like a more visual example, you can check out this JSFiddle.

Upvotes: 1

Robert Wade
Robert Wade

Reputation: 5003

Collapse your borders and remove your cell padding. Also you have a few td and tr tags improperly 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>

Upvotes: 1

Related Questions