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

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

例如参见为Chrome，Edge

Answer 2

导致填充的CSS不包括在您的示例中。运行此代码段，然后查看输出。您导入的其他CSS导致表格宽度变大。

在Chrome中，右键单击表格单元格之一，然后进行检查。在devtools中查看样式，以了解其来源。

  #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的表属性已添加到顶部，使浏览器继承它们，因此忽略了#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;
  }

请注意，对于CSS，关键字！important 用于覆盖属性。

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

3 个答案: