[英]How to limit the number of columns of the table created from PHP while loop
我从 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>
一张桌子不能打破。 一种解决方案是将每个垂直行创建为一个 div(使用 float:left 或 display:inline-block)。 这样每个垂直行都会放在上一行的右边,如果没有更多的空间,它会自动跳到下一行。 例如
<div style="float:left;">
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>etc...</p>
</div>
您可以选择将所有行包装在一个 div 中以控制它们收集的宽度。
我认为不可能使用“table”元素制作响应式布局。
如果您的单元格的大小始终相同,您可以尝试以下操作:
例子:
.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>';
只是在想为什么不以水平方式制作以获得更好的观看体验...
*由于 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.