Удалить лишнее пространство между элементами th и td - PullRequest
Новая
       26

Удалить лишнее пространство между элементами th и td

1 голос
/ 25 марта 2019

Я использую таблицу для отображения данных. Я пытаюсь удалить пространство слева и справа от элементов 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>

Это то, что я получаю таблица

Красный круг - это то, что я хочу удалить.

Ответы [ 3 ]

0 голосов
/ 25 марта 2019

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>
0 голосов
/ 25 марта 2019

Извините за проблему, с которой вы столкнулись, но я не вижу ее с моей стороны. Я написал новый 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>

Возможные причины:

  1. проблема с браузером (попробуйте использовать другой браузер, очистите историю в вашем браузере)
  2. Вы никогда не сохраняли свои правки
  3. ваш 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;
  }

обратите внимание на ключевое слово ! Важный для css для переопределения атрибутов.

0 голосов
/ 25 марта 2019

Если вы используете Firefox, используйте Inspector .Таким образом, вы можете увидеть, какой атрибут css влияет на элементы таблицы.Для других браузеров должны быть аналогичные возможности.

См., Например, для Chrome , Edge

...