Почему моя таблица не будет уменьшаться ниже 170 пикселей в высоту?

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

У меня есть следующий код:

 #superheader {
  width: auto;
  height: 100px;
  position: relative;
}

#superheader p {
  font-family: Sansation;
  font-size: 50px;
}

#superheader table {
  border: solid;
  height: 100px;
}

#header {
  height: 140px;
  box-shadow: 0em 0.5em 0.5em grey;
  position: relative;
  background-color: #E6E6E6;
  padding-left: 70px;
  padding-right: 70px;
  font-family: sans-serif;
}

.menuelement {
  width: 100px;
  height: 40px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  position: relative;
}

.menuelement:hover {
  background-color: dimgrey;
}

#header>a {
  line-height: 2.5;
}

 <div id="header">
  <div id="superheader">
    <div style="margin: auto; width: 630px;">
      <table>
        <tr>
          <td><img src="images/memoji.png" width="100px" height="100px" alt="Icon"></td>
          <td>
            <p>A TITLE</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <a href="template.html">
    <div class="menuelement">Page1</div>
  </a>
  <a href="index.html">
    <div class="menuelement">Page2</div>
  </a>
  <a href="not_found.html">
    <div class="menuelement">Page3</div>
  </a>
</div>

Таблица в этом примере должна иметь высоту 100 пикселей, однако она не будет меньше 170 пикселей.

В чем моя ошибка?

1. Размер вашего шрифта и высота строки размера шрифта превысят заданное пространство, вы можете заметить это, добавив overflow:hidden в ячейки таблицы и увидев, что ваш шрифт потеряет часть своего пространства. Решение: уменьшите размер шрифта

Ответ №1:

Ну, на самом деле вы не можете контролировать height или width элементов с display: table; помощью, потому что по умолчанию, если их ячейки height или width больше, чем height или width элемента с display: table; элементом, будет расти. Итак, вам нужно контролировать размер ячеек, а не саму таблицу.

В вашем конкретном случае есть два подхода к преодолению этой ситуации.

Управление ячейками: поскольку вы использовали p тег в своей таблице, и этот тег имеет поля 1em по умолчанию сверху и снизу, вы можете просто переопределить его, а поскольку внутренние ячейки больше не больше самой таблицы, вы можете управлять ее размерами (при условии, что они не меньше ячеек). Кроме того, имейте в виду font-size , что и line-height сделает ваши ячейки больше, чем обычно, но если вы хотите сохранить их как есть, вам следует отказаться от поля по умолчанию.
Показать фрагмент кода
```
 p {
  font-family: Sansation;
  font-size: 50px;
  margin: 0;
}

table {
  border: solid;
  height: 100px;
}  
```
```
 <table>
  <tr>
    <td><img src="images/memoji.png" alt="Icon"></td>
    <td>
      <p>A TITLE</p>
    </td>
  </tr>
</table>  
```
Использование display: block; : Вы можете просто переопределить display таблицу и заставить ее работать как block , но вам все равно нужно управлять внутренними элементами, чтобы не переопределять саму таблицу. Кроме того, имейте в виду, что вы также должны контролировать width размер таблицы, потому что элемент block по умолчанию заполняет доступное пространство.
Показать фрагмент кода
```
 p {
  font-family: Sansation;
  font-size: 50px;
  margin: 0;
}

table {
  border: solid;
  height: 100px;
  display: block;
}  
```
```
 <table>
  <tr>
    <td><img src="images/memoji.png" alt="Icon"></td>
    <td>
      <p>A TITLE</p>
    </td>
  </tr>
</table>  
```

Ответ №2:

Добавьте border-spacing: 0px; в свой стиль таблицы, чтобы удалить пробелы между ячейками:

 #superheader table{
    border: solid;
    height: 100px;
    border-spacing: 0px;
}

а затем удалите пробелы внутри ячеек:

 td, td *{
   display: table-cell;
   margin: 0px;
   padding: 0px;
}