【问题标题】:How do I set fixed td cell height in CSS when I already have it set, but it is not being honored?当我已经设置了固定的 td 单元格高度但它没有被兑现时,如何在 CSS 中设置它?
【发布时间】:2019-09-13 23:54:03
【问题描述】:

如果您运行下面的示例,您会看到每行的单元格高度略有不同。即使内容不同,我也要保持相同。

怎么样?我以为我已经在使用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>

【问题讨论】:

    标签: html css html-table height row-height


    【解决方案1】:

    您需要在td 中添加一个div,并为其设置一个固定的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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-07-24
      • 2015-05-05
      • 2020-09-04
      • 2017-11-15
      • 2012-03-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多