[英]How to limit the number of columns of the table created from PHP while loop
I have this table created from php while loop from MySQL.我从 php 创建了这张表,而从 MySQL 循环。 The problem is the column goes outside the page.
问题是该列超出了页面。 Using CSS
word-wrap
did not work.使用 CSS
word-wrap
行不起作用。
Here's what I am looking for这就是我要找的
The original code.原始代码。 Sorry for the ugly code.
对不起丑陋的代码。
<?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>
A table can't break.一张桌子不能打破。 A solution is to create each vertical row as a div (with float: left or display: inline-block).
一种解决方案是将每个垂直行创建为一个 div(使用 float:left 或 display:inline-block)。 This way each vertical row will be placed to the right of the previous, and if there is no more room, it will automatically jump to the next line.
这样每个垂直行都会放在上一行的右边,如果没有更多的空间,它会自动跳到下一行。 Eg
例如
<div style="float:left;">
<p>Column</p>
<p>Column</p>
<p>Column</p>
<p>etc...</p>
</div>
You can optionally wrap all the rows in a div to control their collected width.您可以选择将所有行包装在一个 div 中以控制它们收集的宽度。
I think is not possible to make a responsive layout using the "table" element.我认为不可能使用“table”元素制作响应式布局。
If your cells have allways the same size you can try something like this:如果您的单元格的大小始终相同,您可以尝试以下操作:
Example:例子:
.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>
Your PHP Loop should look something like this:您的 PHP 循环应如下所示:
echo '<div class="tablecol"><table>';
foreach ($data['col2'] as $col2) {
echo '<tr><td>'.$col2.'</td></tr>';
}
echo '</table></div>';
just thinking why don't you make it in horizontal way for a better viewing experience...只是在想为什么不以水平方式制作以获得更好的观看体验...
*not sure is correct or not due to the sql queries.... try to modified...idea is something like this: *由于 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.