如何在頁面中並排對齊列表數據

Question

我正在嘗試像這樣對齊數據列表。

但我得到這樣的輸出

我試過以下代碼

$rawResult = unserialize($rawResult->sections);
$ans = array(0,1,2,3,4,5);
foreach ($rawResult as $questionKey => $questionArray) {
  foreach ($questionArray['answers'] as $key => $value) {
    if(in_array($value['given'][0], $ans)){
    $answers[$key] = $value['given'][0];
  }
  }
  foreach ($questionArray['questions'] as $id => $val) {
    if (!preg_match("/How stressful has it been/i", $val['name'])) {
    /*if($val['type'] == 'Single'){*/
      $questions[$val['id']] = $val['name'];
    }
  }
}
ob_start();
global $csa_answers;
asort($answers);
$i=0;
$m=0;
$l=0;
$y=0;
global $pdf;

?>
<table class="progress-bar-container assessment-result" style="text-align:center;">
      <tr>
        <td><h3 style="font-weight: 700;font-size: 25px;line-height: 32px;color: #000;margin-bottom: 6px;font-family: 'Karla';">CSA Questions/Ratings</h3></td>
      </tr>
       <tr>
        <td><span style="text-align: center;">Every CSA question and your response is listed below. Each question started out with the phrase,<br>
"How much have you been stressed by.....?"</span></td>
      </tr>
      </table>

        <table class="table table-striped table-bordered" style="text-align:left;" width="620">

          <tr>
            <td><table width="310"><tr>
            <td width="225" style="background-color: #EAE9E8;font-size:12px;">QUESTION</td>
            <td width="80" style="background-color: #EAE9E8;font-size:12px;">RATING</td>
            </tr>
            <tr>
          <?php foreach ($answers as $id => $ans) {
            if(isset($questions[$id])){
              $i++; ?>
              <td style="<?php echo $c;?>"><span style="font-size:10px;"><?php echo str_replace('How much have you been stressed by ','',stripslashes($questions[$id]));?></span></td>
              <td style="<?php echo $c;?>"><span style="font-size:10px;"><i><?php echo $csa_answers[$ans];?></i></span></td>
              <?php
                if ($l==0) {
                  $c= "background-color: #EAE9E8;";
                  $l++;
                }
                else{
                  $c="";
                  $l=0;

                }
                $i = 0;
                $m++;
              echo "</tr><tr >";

              $y++;
              if ($y==34) {
                $l==0;
                echo '<td></td><td></td></tr></table></td><td ><table width="310"><tr>
            <td width="225" style="background-color: #EAE9E8;font-size:12px;">Question</td>
            <td width="80" style="background-color: #EAE9E8;font-size:12px;">Rating</td>
            </tr><tr>';
              }

            }
          }
          ?>
      <td></td><td></td></tr></table></td></tr><tr>
<?php echo '<td colspan="2" style="text-align:center;"><span class="score-desc" style="font-size:9px;">The choices for answering each question were:</span><br>
        <span class="csmith-right-margin" style="font-size:9px;"> Not at all (Stress Free) </span>
        <span class="csmith-right-margin" style="font-size:9px;"> A little bit </span>
        <span class="csmith-right-margin" style="font-size:9px;"> Moderately </span>
        <span class="csmith-right-margin" style="font-size:9px;"> Quite a bit </span>
        <span class="csmith-right-margin" style="font-size:9px;"> Extremely </span>
        <span class="csmith-right-margin" style="font-size:9px;"> Does not apply  </span></td></tr>';
           ?>
    </table>
    <?php
  $content = ob_get_clean();
  return $content;

我多次嘗試更改代碼，但仍然得到錯誤的輸出。 我該如何解決這個問題？

Answer 1

表不適合這個，你可以使用：

  1. <div style='display:inline-block'>Column 1</div> <div style='display:inline-block'>Column 2</div>
 2. Use css flex box (prefer for responsive page reason).
 3. Or if you familiar with table use <div style='display:table'></div> as css table not HTML table