在 table 中为 td 指定高度属性
specifying height attribute for a td in table
我想为 table 结构中的 td 指定高度。我在 drupal 中使用 mpdf 生成器创建 pdf。
我尝试将内联 css 提供给 td 但根本没有反映。所以请帮我解决这个问题。
我的要求就像我想要固定的 td,它不应该根据其中的数据长度而改变。
默认情况下 table-布局设置为 auto
。您需要将 table-layout 设置为 fixed
以使其适用于固定 td width/height:
table{
table-layout: fixed;
}
尝试将 div 放入那个 td 中,并将所需的 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>
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>
我想为 table 结构中的 td 指定高度。我在 drupal 中使用 mpdf 生成器创建 pdf。
我尝试将内联 css 提供给 td 但根本没有反映。所以请帮我解决这个问题。
我的要求就像我想要固定的 td,它不应该根据其中的数据长度而改变。
默认情况下 table-布局设置为 auto
。您需要将 table-layout 设置为 fixed
以使其适用于固定 td width/height:
table{
table-layout: fixed;
}
尝试将 div 放入那个 td 中,并将所需的 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>
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>