html - 删除 th 和 td 元素之间的多余空间

Question

我正在使用表格来显示数据。我正在尝试从 th 和 td 元素的左侧和右侧移除空间。

我已经尝试检查堆栈溢出和其他地方，但它们都删除了单元格之间的垂直空间。我要删除的是删除左侧和右侧的空间。

  #contact_search{
    border-collapse: collapse;

  }
  #contact_search tr td, #contact_search tr th{
    /* text-align: center; */
    border: 1px solid #006;
    line-height: 1;
  }

<table id="contact_search" > 
    <thead>
        <tr>								
            <th>Nametest</th>  
            <th>Country</th> 
            <th>City</th> 
            <th>Category</th> 
            <th>Work</th>  
            <th>Mobile</th>  
            <th>Email</th>  
            <th>Trades</th>  
         </tr>
    </thead>
    <tbody>
        <td>John Doe</td>
        <td>Australia</td>
        <td>Auckland</td>
        <td>Corporate Client</td>
        <td>3275020</td>
        <td>9926104</td>
        <td>johndoe@example.com</td>
        <td>None</td>
    </tbody>
</table>

这就是我得到的 table

红色圆圈是我要删除的。

Answer 1

导致填充的 CSS 不包含在您的示例中。运行此代码段并查看输出。您正在导入的其他 CSS 导致了表格宽度。

在 Chrome 中，右键单击其中一个表格单元格并进行检查。查看开发工具中的样式以了解它的来源。

  #contact_search{
    border-collapse: collapse;

  }
  #contact_search tr td, #contact_search tr th{
    /* text-align: center; */
    border: 1px solid #006;
    line-height: 1;
  }

<table id="contact_search" > 
    <thead>
        <tr>                                
            <th>Nametest</th>  
            <th>Country</th> 
            <th>City</th> 
            <th>Category</th> 
            <th>Work</th>  
            <th>Mobile</th>  
            <th>Email</th>  
            <th>Trades</th>  
         </tr>
    </thead>
    <tbody>
        <td>John Doe</td>
        <td>Australia</td>
        <td>Auckland</td>
        <td>Corporate Client</td>
        <td>3275020</td>
        <td>9926104</td>
        <td>johndoe@example.com</td>
        <td>None</td>
    </tbody>
</table>