Question

我用PHP生成了2个HTML表。第一个表始终位于第二个表的顶部。我似乎无法让他们并肩。第二个总是在第一个表下。

我还尝试过添加HTML样式的float以及在表格的html中内联，但仍然不能并排显示。任何帮助将不胜感激！

    //add table for bids and asks
    function build_table($bidarray){
    // start table
    $html = '<table style="display: inline-block;">';
    // header row
    $html .= '<tr>';
    foreach($bidarray[0] as $key=>$value){
            $html .= '<th>' . htmlspecialchars($key) . '</th>';
        }
    $html .= '</tr>';

    // data rows
    foreach( $bidarray as $key=>$value){
        $html .= '<tr>';
        foreach($value as $key2=>$value2){
            $html .= '<td>' . htmlspecialchars($value2) . '</td>';
        }
        $html .= '</tr>';
    }

    // finish table and return it

    $html .= '</table>';
    return $html;
}

$bidarray = array(
    array('Company'=>'cardsltd', 'Min Qty'=>'5', 'Max Qty'=>'10', '$/box'=>'5.00'),
);

$askarray = array(
    array('Company'=>'comp', 'Min Qty'=>'4', 'Max Qty'=>'9', '$/box'=>'4.00'),
);


echo build_table($bidarray) . build_table($askarray) ;

Answer 1

您需要使用<div> s。

采取<div>

在其中放置两个<div>，每个包含一个表。

<div>
 <div style="float:left; width: 49%">
  <table>
   ...
  </table>
 </div>
 <div style="float:left; width: 49%">
  <table>
   ...
   </table>
 </div>
</div>

这将使您的桌子并排放置。

此外，我们可以更改/调整/管理宽度。

49%仅用于演示目的。

Answer 2

PHP代码： //定义表格的类

$html = '<div class="half-width"><table> ...';

CSS代码：

 .half-width
    {
    position: relative;
    width: 100%;
    padding-right: 15px;  /*optional*/
    padding-left: 15px;   /*optional*/
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
   }

您还可以为已定义的班级添加float:right;width:50%（此处的班级名称为half-width）

并排放置2个PHP生成的HTML表

2 个答案: