Блог

Главная - Вопросы по программированию - Несогласованная высота строки таблицы — Ячейки Без содержимого и доступные для содержимого:true Имеют Разную высоту

Несогласованная высота строки таблицы — Ячейки Без содержимого и доступные для содержимого:true Имеют Разную высоту

#css #contenteditable #css-tables

Вопрос:

Ячейки в одной строке таблицы имеют различную высоту. Я пытаюсь исправить это, чтобы высота строки была одинаковой по всей длине.

Ячейки, вызывающие проблему, являются пустыми ячейками, в которых есть «contenteditable:true». Если я изменю их на «contenteditable:false», проблема исчезнет. Кроме того, если в ячейке есть какое-либо содержимое, проблема исчезает.

Заполнение, поля и границы этих ячеек совпадают со всеми другими ячейками, меняется высота содержимого.

Я думал, что это связано с семейством шрифтов, размером, высотой строки и т. Д. поэтому я поставил их во все тд. Я перепробовал множество вариантов шрифтов, высот строк, свойств разрывов строк и т. Д. И, похоже, не может это исправить.

Ссылка на страницу с таблицей: https://sandbox.germanpearls.com/time-tracker/open-task-list/

Любая помощь была бы очень признательна. Спасибо.

введите описание изображения здесь

Комментарии:

1. ты пробовал max-width

2. пробовать position:relative

3. должность:родственник не работал на меня

4. обмани его…… td:empty::after{content:"0a0";}

5. Спасибо вам за всю вашу помощь. Оказывается, добавление td {выравнивание по вертикали: начальное;} исправило это. Проблема заключалась в использовании свойства выравнивания по вертикали таблицы стилей агента пользователя, которое вызывало проблему. Еще раз спасибо вам.

Ответ №1:

это сработало

     td:empty::after{  
       content:"0a0";
    }
 
 .container tr td{
  position:relative;
  border:1px solid black;
  width:100px;
  height:100px;
  text-align:center;
  }
tr{
   background-color:rgba(163, 235, 226, 0.75);
   }
td:hover{
background-color:white;
}
td:empty::after{  
   content:"0a0";
} 
 <table class="container">

  <tr>

    <td contentEditable = "true">I need a wonder</td>
    <td contentEditable = "true">la la la la </td>
    <td contentEditable = "true">ill jump right over</td>

  </tr>

  <tr>
    <td contentEditable = "true">into the cold cold H2O</td>
    <td contentEditable = "true">Baila, baila, baila conmigo
Baila, baila, que yo te sigo</td>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>

  </tr>

  <tr>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>
    <td contentEditable = "true">loremasda sc ba cba ncbnb</td>

  </tr>

</table>

Ответ №2:

Для тех, кто еще испытывает эту проблему, оказывается, добавление:

 td {
  vertical-align: initial;
}

исправил это.

TD использовали свойство вертикального выравнивания таблицы стилей агента пользователя, которое вызывало проблему.

Метки: