Question

我添加了一个php库（php-diff），它按历史记录打印页面的差异（数据来自html格式的mysql）。

我的问题是我想在表格的页脚中添加两个滚动。

我要在所附图像中给出两个滚动条！[在表列中两次滚动] http://prntscr.com/ong7iq

我曾与ul li尝试过此操作，但由于数据是以html格式传入的，因此会中断输出

 public function render()
{
$changes = parent::render();

$html = '';
if(empty($changes)) {
return $html;
    }
$html .= '<div class="table-responsive">';
$html .= '<table class="Differences DifferencesSideBySide">';
$html .= '<thead>';
$html .= '<tr>';
$html .= '<th colspan="2">Old Version</th>';
$html .= '<th colspan="2">New Version</th>';
$html .= '</tr>';
$html .= '</thead>';
foreach($changes as $i => $blocks) {
        if($i > 0) {
            $html .= '<tbody class="Skipped">';
            $html .= '<th>&hellip;</th><td>&nbsp;</td>';
            $html .= '<th>&hellip;</th><td>&nbsp;</td>';
            $html .= '</tbody>';
        }

foreach($blocks as $change) {
$html .= '<tbody class="Change'.ucfirst($change['tag']).'">';
// Equal changes should be shown on both sides of the diff
if($change['tag'] == 'equal') {
foreach($change['base']['lines'] as $no => $line) {
$fromLine = $change['base']['offset'] + $no + 1;
$toLine = $change['changed']['offset'] + $no + 1;
$html .= '<tr>';
$html .= '<th>'.$fromLine.'</th>';
$html .= '<td class="Left"><div class="scrollable"> 
    <span>'.$line.'</span>&nbsp;</span></div></td>';
$html .= '<th>'.$toLine.'</th>';
$html .= '<td class="Right"><div class="scrollable"> 
    <span>'.$line.'</span>&nbsp;</span></div></td>';
$html .= '</tr>';
                }
            }
// Added lines only on the right side
else if($change['tag'] == 'insert') {
foreach($change['changed']['lines'] as $no => $line) {
$toLine = $change['changed']['offset'] + $no + 1;
$html .= '<tr>';
$html .= '<th>&nbsp;</th>';
$html .= '<td class="Left"><div class="scrollable">&nbsp;</div></td>';
$html .= '<th>'.$toLine.'</th>';
$html .= '<td class="Right">
    <div class="scrollable"><ins>'.$line.'</ins>&nbsp;</div></td>';
$html .= '</tr>';
}
}
// Show deleted lines only on the left side
else if($change['tag'] == 'delete') {
foreach($change['base']['lines'] as $no => $line) {
$fromLine = $change['base']['offset'] + $no + 1;
$html .= '<tr>';
$html .= '<th>'.$fromLine.'</th>';
$html .= '<td class="Left"><div class="scrollable"> 
    <del>'.$line.'</del>&nbsp;</div></td>';
$html .= '<th>&nbsp;</th>';
$html .= '<td class="Right"><div class="scrollable">&nbsp;</div>/td>';
$html .= '</tr>';
                }
            }
// Show modified lines on both sides
else if($change['tag'] == 'replace') {
if(count($change['base']['lines']) >= count($change['changed'] 
    ['lines'])) {
foreach($change['base']['lines'] as $no => $line) {
$fromLine = $change['base']['offset'] + $no + 1;
$html .= '<tr>';
$html .= '<th>'.$fromLine.'</th>';
$html .= '<td class="Left"><div class="scrollable"> 
     <span>'.$line.'</span>&nbsp;</div></td>';

    if(!isset($change['changed']['lines'][$no])) {
$toLine = '&nbsp;';
$changedLine = '&nbsp;';
}
else {
$toLine = $change['base']['offset'] + $no + 1;
$changedLine = '<span>'.$change['changed']['lines'][$no].'</span>';
                        }
$html .= '<th>'.$toLine.'</th>';
$html .= '<td class="Right"><div 
    class="scrollable">'.$changedLine.'</div></td>';
$html .= '</tr>';
                    }
                }
else {
foreach($change['changed']['lines'] as $no => $changedLine) {

    if(!isset($change['base']['lines'][$no])) {
$fromLine = '&nbsp;';
$line = '&nbsp;';
}
else {
$fromLine = $change['base']['offset'] + $no + 1;
$line = '<span>'.$change['base']['lines'][$no].'</span>';
                        }
$html .= '<tr>';
$html .= '<th>'.$fromLine.'</th>';
$html .= '<td class="Left"><div class="scrollable"> 
    <span>'.$line.'</span>&nbsp;</div></td>';
$toLine = $change['changed']['offset'] + $no + 1;
$html .= '<th>'.$toLine.'</th>';
$html .= '<td class="Right"><div 
    class="scrollable">'.$changedLine.'</div></td>';
$html .= '</tr>';
                    }
                }
            }
            $html .= '</tbody>';
        }
    }
$html .= '</table>';
$html .= '</div>';
return $html;
}

我想要两个我在所附图片中给出的滚动！[在表列中两次滚动] http://prntscr.com/ong7iq

如何在html（bootstrap）表列中添加两个水平滚动

0 个答案: