Question

我试图在表格中呈现层次结构。

Caninae
 Canis                   
  adustus                Side-Striped Jackel
  anthus                 African Golden Wolf
  aureus                 Golden Jackel
  latrans                Coyote
  lupus                  Grey Wolf
 Cerdocyon
  thous                  Crab-eating Fox
Felidae
 Panthera
  leo                    Lion

我希望子行比父级缩进一级。我可以通过预先定义一组类来轻松完成此操作，例如.level1{padding-left: 10px;}和.level2{padding-left: 20px;}。

然而，一些最终用户最终会添加比我定义的孩子更多的孩子。有没有＆＃34;一个简单的技巧＆＃34;没有CSS或更好的CSS技术来实现这一目标。我可以查询数据库并在每次页面调用时动态生成CSS，或者我可以使用<td style="padding-left=10px">CONTENT</td>嵌入填充。最后一个可能是最灵活的，但总的来说就是＃34;保持你的CSS不受你的HTML＆＃34;事情。

感谢您的任何建议。

Answer 1

如果您可以修改html，则可以使用<li>

等层次结构

＆＃13;

ul, li { padding:0; margin:0; list-style-type:none; } /** reset **/
li {padding-left:20px;} /** important rule */

＆＃13;

<ul>
  <li>Content
    <ul>
      <li>Content</li>
      <li>Content</li>
      <li>Content</li>
      <li>Content
        <ul>
          <li>Content</li>
          <li>Content</li>
          <li>Content</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Content</li>
  <li>Content</li>
  <li>Content</li>
</ul>

＆＃13;

Answer 2

嵌套<span>方法：

如果数据库返回以下$results：

id       pid              name          description
1        0                Caninae
2        1                Canis                   
3        2                adustus       Side-Striped Jackel
4        2                anthus        African Golden Wolf
5        2                aureus        Golden Jackel

您可以通过以下方式创建上表：

function print_table(){
  $results = some_sql_function();
  //$hierarchy contains an array of childern and an array of data
  $hierarchy = create_hierarchy($results);

  $data = $hierarchy['data'];
  $index = $hierarchy['index'];

  //Create the table header
  $output = "<table>";

  $header = "<tr><th>Name</th><th>Description</th></tr>";
  $output .= $header;

  $rows = create_rows($data, 0, $index, 0);
  $output .= $rows . "</table>";

  echo $output;
}

// Iterating function to nest the childern rows beneith the parents 
function create_rows($data, $parent_id, $index, $level){
  $rows = "";
  if (isset($index[$parent_id])) {
    foreach ($index[$parent_id] as $id) {
      $cell1 = str_repeat('<span style="padding-left:20px">',$level) . $data[$id]["name"] . str_repeat('</span>',$level);
      $cell2 =$data[$id]['description'];
      $row = "<tr><td>$cell1</td><td>$cell2</td></tr>";
      $rows .= $row;
      $rows .= create_rows($data, $id, $index, $level + 1));
    }
  }
  return $rows;
}

function create_hierarchy($results) {
  //The data associated with each account
  $data = array();

  //A list of an account's children
  $index[] = array();
  foreach ($results as $row){
    $id = $row->id;
    $name = $row->name;
    $parent_id = $row->pid;
    $description = $row->description;
    $data[$id] = array('name'=>$name, 'description'=>$description);
    $index[$parent_id][] = $id;
  }

  $hierarchy = array('data'=>$data, 'index'=>$index);

  return $hierarchy;
}

我将我的Drupal代码修改为纯PHP，因此可能存在一些小错误，但这就是我所做的。

使用CSS左键填充可变数量的单元格

2 个答案: