生成具有动态行高度的HTML表

Question

I need to print an html table with row heights sets dynamically based on some values from the database using PHP. 我需要使用PHP根据数据库中的某些值动态打印带行高度集的html表。 seems that html 5 doesn't support inline height and with tags and using css instead. 似乎html 5不支持内联高度和标签，而是使用css代替。 My requirement is to generate an html file and then convert it into pdf using DOM pdf. 我的要求是生成一个html文件，然后使用DOM pdf将其转换为pdf。

Please guide me how to set these parameters dynamically inline or using css or whether a library already available for the same purpose. 请指导我如何动态设置这些参数或使用css或者库是否已用于相同目的。

I Googled a lot, but unable find any results matching my requirement. 我用Google搜索了很多，但无法找到符合我要求的任何结果。 Also am attaching final output format 还附加最终输出格式

(In answer column i printed some values which is the height required for each row) （在答案栏中，我打印了一些值，即每行所需的高度） 样本输出

Thanks in advance 提前致谢

Answer 1

You can use inline styles: 您可以使用内联样式：

<tr style="height: 300px;"></tr>

I am not sure if you can effectively set the height of a <tr> tag, so you might have to set the height of each <td> in the row individually. 我不确定您是否可以有效地设置<tr>标签的高度，因此您可能必须单独设置行中每个<td>的高度。 Give it a try. 试试看。

Furthermore, I am not sure how you have your array of rows and columns structured, but this might shed some light on how to do it. 此外，我不确定你是如何构建你的行和列数组的，但这可能会对如何实现它有所启发。

<?php
$array=array(array(50,'r1c1','r1c2'),array(50,'r2c1','r2c2'));
echo '<table>';
foreach($array as $row)
{
    echo '<tr style="height: '.$row[0].'px;">';
    echo '</tr>';
    for($i=1;$i<count($row);++$1)
    {
        echo '<td>'.$row[$i].'</td>';
    }
}
echo '</table>';
?>

If you still need help, post the exact array you wish to turn into a <table> and I will do my best to assist. 如果您仍然需要帮助，请将您希望转换为<table>的确切数组发布，我会尽力协助您。

Answer 2

If I understand this right, your table rows can be different sizes from each other, but for each row there is a rule in database, that sets row's height, no matter what height the content of the row, right? 如果我理解这一点，你的表行可以是彼此不同的大小，但是对于每一行，数据库中都有一个规则，它设置行的高度，无论行的内容有多高，对吧？ Then you can use something like this: 然后你可以使用这样的东西：

<html>
<head>
    <style>
        <?php foreach($yourRows as $key => $row) { ?>
            #row<?=$key;?>{
                height: <?=$row['height']; ?>px;
            }
        <?php } ?>
    </style>
</head>
<body>
    <table>
    <?php foreach($yourRows as $key => $row) { ?>
        <tr id="row<?=$key; ?>">
            ...
        </tr>
    <?php } ?>
    </table>
</body>

In the style tag you can replace " #row<?=$key;?> " with " #row<?=$key;?> td " 在样式标记中，您可以将“ #row<?=$key;?> ”替换为“ #row<?=$key;?> td ”

Updated

Anyway, if you want to use the inline styling, you can make it happen like that: 无论如何，如果你想使用内联样式，你可以这样做：

<html>
<body>
    <table>
        <?php foreach($yourRows as $row) { ?>
                <tr style="height:<?=$row['height']; ?>px">
                    Or you can apply height to td instead of the tr...
                </tr>
        <?php } ?>
    </table>
</body>

Answer 3

If you think that jQuery might work here is a suggestion. 如果您认为jQuery可能在这里工作是一个建议。 I'm not sure it works with DOMPDF but as we're dynamically creating CSS it should be fine once the DOM has loaded. 我不确定它是否适用于DOMPDF但是因为我们正在动态创建CSS，所以一旦DOM加载就应该没问题。

If you know exactly the heights of each row - then select them using jQuery using eq . 如果你确切知道每行的高度 - 然后使用eq使用jQuery选择它们。

$(document).ready(function() {
    $('table tr').eq(1).css({'height':'250'});
    $('table tr').eq(3).css({'height':'450'});
});

Here is the fiddle . 这是小提琴。

That way you don't have to modify the output but you have to make the assumption the content isn't going to be higher than your fixed height. 这样您就不必修改输出，但必须假设内容不会高于固定高度。

If you need this to be more dynamic then you'll need to either associate identifiers to your rows, like a class or something like that. 如果您需要更加动态，那么您需要将标识符与行关联，例如类或类似的东西。 Or alternatively, if you have a pattern in your content is to create a regular expression that scans your content and identifies it that way - then you can apply CSS rules to these rows once matched using jQuery. 或者，如果您的内容中有一个模式是创建一个正则表达式来扫描您的内容并以这种方式识别它 - 那么您可以使用jQuery匹配后对这些行应用CSS规则。

EDIT 编辑

OK so I may have slightly misunderstood if you have the height value stored in the database. 好吧，如果您将高度值存储在数据库中，我可能会有些误解。 It also looks as though you've determined already that you're unable to use inline styles. 它看起来好像你已经确定你无法使用内联样式。

Here is my next suggestion. 这是我的下一个建议。

You're building the table from a loop so it probably looks something like this. 你是从一个循环构建表，所以它可能看起来像这样。

foreach($rows as $row) {
  echo '<tr data-height="'.$row['height'].'"><td>...</td></tr>;
}

if you add data-height="'.$row['height'].'" then you have a value that we can get using jQuery's data like so. 如果你添加data-height =“'。$ row ['height']。'”那么你有一个我们可以使用jQuery的数据得到的值。

$(document).ready(function() {
    $('table tr').each(function() {
        var height = $(this).data('height');
        $(this).css({ 'height': height });
    });
});

Here is an example fiddle with static data-height values. 下面是一个例子拨弄具有静态数据的高度值。 Let me know how you get on. 让我知道你是怎么办的。

生成具有动态行高度的HTML表

问题描述

3 个解决方案

解决方案1
1 2013-08-05 06:43:33

解决方案2
1 2013-08-05 06:51:34

解决方案3
1 2013-08-05 09:28:14

生成具有动态行高度的HTML表

问题描述

3 个解决方案

解决方案1 1 2013-08-05 06:43:33

解决方案2 1 2013-08-05 06:51:34

解决方案3 1 2013-08-05 09:28:14

解决方案1
1 2013-08-05 06:43:33

解决方案2
1 2013-08-05 06:51:34

解决方案3
1 2013-08-05 09:28:14