如何限制從 PHP while 循環創建的表的列數

Question

我從 php 創建了這張表，而從 MySQL 循環。 問題是該列超出了頁面。 使用 CSS word-wrap行不起作用。

這就是我要找的

原始代碼。 對不起丑陋的代碼。

<?php
// 1
$sqlCount = "SELECT MAX(rowascol_id) AS totalcount FROM rowascol";
$resultCount = mysqli_query($con, $sqlCount);
$row = mysqli_fetch_assoc($resultCount);
    $totalCount = $row['totalcount'];

// 2
$sqlRowAsCol = "SELECT * FROM rowascol";
$resultRowAsCol = mysqli_query($con, $sqlRowAsCol);
?>

<table id="myTable" border="1" cellpadding="6" style="border-collapse: collapse; text-align: center;">
    <thead style='background-color: #cee8ff;'>
        <?php 
        for($i = 1; $i <= $totalCount; $i++){
            echo "<th>$i</th>";
        }?>
    </thead>
    <tbody>
        <?php 
        while($row = mysqli_fetch_array($resultRowAsCol)) {
            $data['col1'][] = $row['n1'];
            $data['col2'][] = $row['n2'];
            $data['col3'][] = $row['n3'];
            $data['col4'][] = $row['n4'];
            $data['col5'][] = $row['n5'];
            $data['col6'][] = $row['n6'];
            $data['ans'][] = $row['ans'];
            $data['edit'][] = $row['rowascol_id'];
        }?>

        <!-- looping the table -->
        <?php
        // 1
        echo "<tr>";
            foreach ($data['col1'] as $col1) {
                echo "<td>$col1</td>";
            }
        echo "</tr>";
        echo "<tr>";
            foreach ($data['col2'] as $col2) {
                echo "<td>$col2</td>";
            }
        echo "</tr>";
        echo "<tr>";
            foreach ($data['col3'] as $col3) {
                echo "<td>$col3</td>";
            }
        echo "</tr>";
        echo "<tr>";
            foreach ($data['col4'] as $col4) {
                echo "<td>$col4</td>";
            }
        echo "</tr>";
        echo "<tr>";
            foreach ($data['col5'] as $col5) {
                echo "<td>$col5</td>";
            }
        echo "</tr>";
        echo "<tr>";
            foreach ($data['col6'] as $col6) {
                echo "<td>$col6</td>";
            }
        echo "</tr>";
        echo "<tr  id='ansCell' style='font-weight: bold;'>";
            foreach ($data['ans'] as $ans) {
                echo "<td>$ans</td>";
            }
        echo "</tr>";
        echo "<tr>";
            foreach ($data['edit'] as $edit) {
                echo "<td>";
                    echo "<a href='edit.php?id=".$edit."'>Edit</a>";
                echo "</td>";
            }
        echo "</tr>";
         ?>
    </tbody>
</table>

Answer 1

一張桌子不能打破。 一種解決方案是將每個垂直行創建為一個 div（使用 float：left 或 display：inline-block）。 這樣每個垂直行都會放在上一行的右邊，如果沒有更多的空間，它會自動跳到下一行。 例如

<div style="float:left;">
   <p>Column</p>
   <p>Column</p>
   <p>Column</p>
   <p>etc...</p>
</div>

您可以選擇將所有行包裝在一個 div 中以控制它們收集的寬度。

Answer 2

我認為不可能使用“table”元素制作響應式布局。

如果您的單元格的大小始終相同，您可以嘗試以下操作：

• 將每一列創建為 "div" style="diaplay:inline-block;"
• 將您的列包含在其中（作為表格或僅作為“div”）

例子：

 .tablecol{ display:inline-block; vertical-align:top; border:1px solid #555555; margin:2px 0; }.tablecol td{ border:1px solid #333333; width:30px; text-align:center; }

 <div class="tablecol"> <table> <tr><th>H1</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H2</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H3</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H4</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H5</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H6</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H7</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H8</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H9</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H10</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H12</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H13</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H14</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H15</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H16</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H17</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H18</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H19</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div> <div class="tablecol"> <table> <tr><th>H20</th></tr> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> </table> </div>

您的 PHP 循環應如下所示：

 echo '<div class="tablecol"><table>';
        foreach ($data['col2'] as $col2) {
            echo '<tr><td>'.$col2.'</td></tr>';
        }
    echo '</table></div>';

Answer 3

只是在想為什么不以水平方式制作以獲得更好的觀看體驗...

*由於 sql 查詢，不確定是否正確......嘗試修改......想法是這樣的：

<table id="myTable" border="1" cellpadding="6" style="text-align: center;">

<tbody>
    <?php 
    for($j = 0; $j <= $totalCount; $j++){ 
        echo "<tr>";
        echo "<td>$j</td>"; // your title

            $row = mysqli_fetch_array($resultRowAsCol);
            $edit =$row['rowascol_id'];

            echo "<td>".$row['n1']."</td>";
            echo "<td>". $row['n2']."</td>";
            echo "<td>". $row['n3']."</td>";
            echo "<td>". $row['n4']."</td>";
            echo "<td>". $row['n5']."</td>";
            echo "<td>". $row['n6']."</td>";                
            echo "<td>". $row['ans']."</td>";
            echo "<td> <a href='edit.php?id=".$edit."'>Edit</a></td>";

        echo "</tr>";
    }?>
</tbody>