内表在左侧添加1-2像素填充

Question

假设我有一个表：

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

举例来说，我的主桌子上有一个TD，但是我需要在孩子桌上进行3 TD。如果我按照上面显示的那样做，看起来像这样。

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

内表使我左右伸出约1-2像素。有什么方法可以排列这两个语句？

Answer 1

崩溃的边界并卸下牢房填充。另外，您有一些TD和TR标签不当。

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

当然。该空间是由于两个因素造成的：

1. 默认情况下，表单元格在之间具有空间。要一起崩溃，您需要将border-collapse: collapse应用于父表。

2. 表单元格默认情况下具有1Px的padding。您需要通过执行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>

如果您想要一个更视觉示例，则可以查看此jsfiddle。

Answer 3

尝试以下：

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