为表中的 td 指定高度属性

Posted 2023-05-07

【中文标题】为表中的 td 指定高度属性

【英文标题】：specifying height attribute for a td in table

【发布时间】：2016-04-12 06:15:46

【问题描述】：

我想为表结构中的 td 提供高度。我在 drupal 中通过 mpdf 生成器创建 pdf 时使用它。 我尝试将内联 css 提供给 td 但根本没有反映。所以请帮我解决这个问题。 我的要求就像我想要固定 td，它不应该根据其中的数据长度而改变。

【问题讨论】：

给我们看一些代码...你已经尝试了什么？

在 CSS 文件中使用 td 添加样式 tdheight: 20px;

【参考方案1】：

默认情况下，表格布局设置为auto。您需要将表格布局设置为 fixed 以使其适用于固定的 td 宽度/高度：

table
   table-layout: fixed;

【参考方案2】：

尝试在该 td 中放置一个 div，并将所需的 css 分配给该 div。

例子：

<table>
  <tr>
    <td>
      <div style='display: inline-block; height: 100px;'>

      </div>
    </td>
  </tr>
</table>

或：

<table>
  <tr>
    <td>
      <span style='display: inline-block; height: 100px;'>

      </span>
    </td>
  </tr>
</table>

【参考方案3】：

td 似乎没有强制固定高度。一种解决方法是将td 内容包含在div 中并将样式应用于div。

下面是一个例子：

table 
  border-collapse: collapse;
  table-layout: fixed;

td 
  border: 1px solid grey;

.table1 td div 
  height: 30px;
  overflow: hidden;

.table2 td 
  height: 40px;

<table class="table1">
  <tr>
    <td>
      <div>Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here
      </div>
    </td>
    <td>
      <div>Another text hereAnother text hereAnother text hereAnother text hereAnother text hereAnother text hereAnother text here</div>
    </td>
  </tr>
</table>
<br/>

<table class="table2">
  <tr>
    <td>
      Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here
    </td>
    <td>Another text hereAnother text hereAnother text hereAnother text hereAnother text hereAnother text hereAnother text here
    </td>
  </tr>
</table>