删除 th 和 td 元素之间多余的 space

Question

我正在使用 table 来显示数据。我正在尝试从 th 和 td 元素的左侧和右侧删除 space。

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

  #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

如果您使用 Firefox，请使用 Inspector。这样您就可以看到哪个 css 属性影响 table 元素。对于其他浏览器应该也有类似的可能性。

参见例如Chrome, Edge

Answer 2

导致填充的 CSS 未包含在您的示例中。运行这段代码并查看输出。您正在导入的其他 CSS 导致 table 宽度。

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

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

Answer 3

对于您遇到的问题，我深表歉意，但我无法从我这边看到它。我写了一个新的 html 文件并复制了你的内容，没有任何编辑，就像你在下面看到的那样，但没有检测到问题。你也可以自己试试看。

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

可能的原因包括：

浏览器问题（尝试使用不同的浏览器，清除浏览器上的历史记录）
您从未保存过您的编辑
你的 css 已经在顶部添加了 table 属性，使浏览器继承它们，因此忽略了 #contact_search

顺便说一下，您可以在 css 中自己尝试一下

#contact_search{
    border-collapse: collapse!important;

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

请注意关键字 !important css 用于覆盖属性。

删除 th 和 td 元素之间多余的 space

Remove Excess space between th and td Elements

html

css

css-tables