使用CSS左鍵填充可變數量的單元格

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;}來輕鬆完成此操作。

但是，一些最終用戶最終會添加比我所定義的更多子女的子女。有沒有一個簡單的技巧來完成這個沒有CSS，或更好的CSS技術。我可以查詢數據庫並在每次調用頁面時即時生成CSS，或者我可以使用<td style="padding-left=10px">CONTENT</td>嵌入填充。最後一個可能是最靈活的，但是整個「讓你的CSS離開你的HTML」的東西。

感謝您的任何建議。

Answer 1

嵌套的<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，所以可能有一些微小的錯誤，但是這是我做的。

Answer 2

如果你可以修改你的HTML，你可以使用一個層次結構像<li>

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

<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>