How can I split this dynamic list into 3 columns? - php

Question

I'm working with an older web app, and aside from rewriting everything to modern standards I'm trying to make the modifications as simple as possible.
As you can see below I have a dynamically created list of a directory. The code works but I can't figure out the best way that I can split the list into 3 columns. I'm limited to having this thing work in IE9 (if it works on any other browser that's just a plus). The nested tables are a mess, I know, but that's how this thing was built, I'm just trying to modify it to us the dynamic directory listing (with a couple checkboxes).
Is there some PHP that would do this? Or is there some CSS techniques that can work? I'm just a bit lost on what will work for this blast from the past.
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#808080">
<tr>
<td>
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr align="center" bgcolor="#000000">
<td valign=bottom class="style6 Normal"><strong>Watertown Network Shared Directory Access<br>
Applies to "P" drive permissions - <br>
By Default all users have at <em>least</em> "read-only" access to all folders/files on the "S" drive. </strong></td>
</tr>
<tr>
<td align="left"><table width="100%" border="0">
<?php
//$path = '\\\\wttfs001\\private';
$path = '\\\\wttfs001\\shared';
$directories = scandir($path);
echo '<ul>';
foreach ($directories as $directory){
if ($directory === '.' or $directory === '..') {
continue;
}
if(is_dir($path . '/' . $directory)){
echo '<input type="checkbox" name="read[]" value="' . $directory . '" />R';
echo '<input type="checkbox" name="write[]" value="' . $directory . '" />W';
echo ' ' . $directory . '<br>';
}
}
echo '</ul>';?>
</table></td>
</tr>
</table>

Answer 1

It's going to depend on how you want them to flow.
What I'm not seeing in your loop are any <li> tags. I would amend your loop as follows:
foreach ($directories as $directory){
if ($directory === '.' or $directory === '..') { continue; }
if (is_dir($path . '/' . $directory)){
echo '<li><input type="checkbox" name="read[]" value="' . $directory . '" />R</li>';
echo '<li><input type="checkbox" name="write[]" value="' . $directory . '" />W</li>';
echo '<li>' . $directory . '</li>';
}
}
Now, you have markup to play around with. From there, you can apply styling to adjust your rows or columns, given a mark up structure that resembles:
HTML
<ul class="dir-1">
<li><input type="checkbox" name="read[]">R</li>
<li><input type="checkbox" name="write[]">W</li>
<li>dir-1</li>
</ul>
<ul class="dir-2">
<li><input type="checkbox" name="read[]">R</li>
<li><input type="checkbox" name="write[]">W</li>
<li>dir-2</li>
</ul>
CSS
ul[class^="dir-"],
ul[class*=" dir-"] {
padding: 0;
margin: 0;
clear: both;
}
ul[class^="dir-"] li,
ul[class*=" dir-"] li {
display: inline-block;
width: 32%;
float: left;
margin-right: 1%;
}
http://codepen.io/anon/pen/aOgOdg

Answer 2

The above was helpful, pointed me in a direction on CSS....found an answer so simple I can't believe I struggled so much with it.
<?php
//$path = '\\\\wttfs001\\private';
$path = '\\\\wttfs001\\shared';
$directories = scandir($path);
echo '<ul class="fred">';
foreach ($directories as $directory){
if ($directory === '.' or $directory === '..') {
continue;
}
if(is_dir($path . '/' . $directory)){
echo '<li class="wilma"><input type="checkbox" name="chkRead[]" value="' . $directory . '" />R</li>';
echo '<li class="wilma"><input type="checkbox" name="chkWrite[]" value="' . $directory . '" />W</li>';
echo '<li class="directory">' . $directory . '</li>';
}
}
echo '</ul>';
?>
I put in the li tag as mentioned and gave them a 2 different classes. 1 for the checkboxes and one for the directory listing.
For CSS I used:
li.wilma{
display: inline-block;
padding-left: .2em;
padding-bottom: .25em;
padding-top: .25em;
}
li.directory{
display: inline-block;
width: 15%;
padding-right: 1em;
padding-left: 2em;
padding-bottom: .25em;
padding-top: .25em;
}
As is, it works so far for what I was looking for, to format a dynamically created directory list with checkboxes. Honestly I have no idea if all the padding is necessary, CSS is such mystery to me yet, but I have a nice looking list now.