Блог

Главная - Вопросы по программированию - Как мне установить фиксированную высоту ячейки td в CSS, когда она уже установлена, но она не выполняется?

Как мне установить фиксированную высоту ячейки td в CSS, когда она уже установлена, но она не выполняется?

#html #css #html-table #height #row-height

#HTML #css #html-таблица #высота #высота строки

Вопрос:

Если вы запустите приведенный ниже пример, вы увидите, что высота ячейки немного отличается в каждой строке. Мне нужно, чтобы она была одинаковой, даже если содержимое отличается.

Как? Я думал, что уже устанавливаю ее с помощью height: 1.7em; , но, похоже, это игнорируется.

 #cert_legend {
    border-collapse: collapse;
    margin-bottom: 30px;
    
}

#cert_legend th, #cert_legend td {
    border: 1px solid #000;
    border-collapse: collapse;
    font-size: 8pt;
    padding: 2px;
    overflow: auto; 
    height: 1.7em;
    max-height: 1.7em;
}

#cert_legend tr>th {
    text-align: center;
}
.cert_description {
    max-width: 200px;
}  
 <table id="cert_legend">
  <tbody>
    <tr>
      <th colspan="4">Test Variable Legend</th>
    </tr>
    <tr>
      <td class="cert_title">time</td>
      <td class="cert_description">Minutes elapsed</td>
      <td class="cert_title">DPDsn</td>
      <td class="cert_description">Tested differential pressure vs duty point at design RPM</td>
    </tr>
    <tr>
      <td class="cert_title">tw</td>
      <td class="cert_description">Water temperature</td>
      <td class="cert_title">Torque</td>
      <td class="cert_description">Pump torque</td>
    </tr>
    <tr>
      <td class="cert_title">pfin</td>
      <td class="cert_description">Feed pressure in. This is a relative reading to tank pressure</td>
      <td class="cert_title">Eff</td>
      <td class="cert_description">Pump Efficiency</td>
    </tr>
  </tbody>
</table>

Ответ №1:

Вам нужно добавить div внутри td и установить для него фиксированное height значение, а также установить переполнение так, auto как вы хотите

 td {
    border: 1px solid #000;
}

td > div {
    height: 1.7em;
    overflow: auto;
}  
 <table>
    <tr>
        <td>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat delectus explicabo natus tempore, officiis quas in eius dolore cumque non iste eveniet necessitatibus, inventore odio cupiditate consequuntur quis mollitia.
            </div>
        </td>
    </tr>
</table>