有没有办法创建像嵌套列表这样的表？ （图片供参考）

Question

在我的应用中，用户可以选择他的一些关注者来查看他们的一些关注者。

我希望我的函数的结果看起来像图像： （请不要介意错误的间距）

但我无法正确嵌套表格或向左或向右移动表格行。

这是我用来生成图像的代码：

table {
  position: relative;
  left: 126px;
  margin-left: 16px;
  margin-top: 16px;
  border-collapse: collapse;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #abc;
  float: left;
  margin-right: 20px;
}
tr {
  height: 70px;
  width: 732px;
}
td {
  height: 70px;
  margin: 0px;
}
p {
  margin-right: 16px;
  line-height: 70px;
}
.flldfll {
  margin-top: 0px;
  margin-left: 91px;
}

<div id="complist">
  <table class="fll">


    <tr>
      <td>
        <div class="avatar"></div>
      </td>
      <td>
        <p>Nome Cognome</p>
      </td>
      <td>
        <p>@nickname</p>
      </td>
      <td>
        <p>ID</p>
      </td>
    </tr>

  </table>

  <table class="flldfll">


    <tr>
      <td>
        <div class="avatar"></div>
      </td>
      <td>
        <p>Nome Cognome</p>
      </td>
      <td>
        <p>@nickname</p>
      </td>
      <td>
        <p>ID</p>
      </td>
    </tr>



  </table>

  <table class="fll">


    <tr>
      <td>
        <div class="avatar"></div>
      </td>
      <td>
        <p>Nome Cognome</p>
      </td>
      <td>
        <p>@nickname</p>
      </td>
      <td>
        <p>ID</p>
      </td>
    </tr>

  </table>

  <table class="fll">


    <tr>
      <td>
        <div class="avatar"></div>
      </td>
      <td>
        <p>Nome Cognome</p>
      </td>
      <td>
        <p>@nickname</p>
      </td>
      <td>
        <p>ID</p>
      </td>
    </tr>

  </table>



</div>

这是我想要完成的伪代码：

int count= 10; //numbers of followers to show
for(i<count, i++){
    generate YourFollowers <tr>s;
        if(YourFollowers.ID == FollowerPreviouslySelected.ID) {
            for(j<count, j++){
                generate FollowersFollowers <tr>s; //<tr>s shifted to right
            }
        }
}

有没有正确的方法来实现我的目标？ （我正在使用jsp页面）

提前致谢！

Answer 1

我不知道是否有一种“最佳实践”方法可以做到这一点，但这就是我接近它的方式：

首先，像正常一样使用<ul>。但是，您可以在<ul>中包含表格元素。例如：

<ul>
    <li>
        <table class="ListTable">
            <tr>
                <td>
                    Content
                </td>
            </tr>
        </table>
    </li>
    <li>
        <table>...</table>
        <ul>
            <!-- Do what was done in the first li here -->
        </ul>
    </li>
</ul>

因此，正如您所看到的，在每个<li>中，您可以拥有一个自包含的表，并根据需要使用.ListTable设置样式。您也可以使用<div>代替使用表格（不是非常适合移动设备），而是使用类似于以下内容的div.ListTableElement { display: inline-table; ... } ：

.ListTableElement

可能还为所有$urlRouterProvider.otherwise('/dashboard'); $stateProvider .state('dashboard', { url: '/dashboard', views: { 'main': { controller: 'DashboardCtrl', templateUrl: 'dashboard.tpl.html' } } }) .state('recordings', { url: '/recordings', views: { 'main': { controller: 'RecordingsCtrl', templateUrl: 'recordings.tpl.html' } } }) .state('recordings.search', { abstract: true, url: '/search', views: { 'recordings': { controller: 'SearchCtrl', templateUrl: 'search.tpl.html' }, '': { templateUrl: 'searchContent.tpl.html' } } }) .state('recordings.search.form', { url: '/form', controller: 'SearchCtrl', templateUrl: 'form.tpl.html' }) .state('recordings.search.results', { url: '/results', controller: 'ResultsCtrl', templateUrl: 'results.tpl.html' }); 添加基于固定/％的宽度。

Answer 2

我个人会使用嵌套的无序列表。下面是我将如何处理您提供的布局的基本示例。

<ul>
    <li>
        <div>
            <img src="http://placehold.it/50x50/?text=avatar"/>
            <span class="name">John Smith</span>
            <span class="handle">Handle</span>
            <span class="user-id">ID</span>
        </div>
        <ul>
            <li>
                <div>
                    <img src="http://placehold.it/50x50/?text=avatar"/>
                    <span class="name">John Smith</span>
                    <span class="handle">Handle</span>
                    <span class="user-id">ID</span>
                </div>
            </li>
            <li>                
                <div>
                    <img src="http://placehold.it/50x50/?text=avatar"/>
                    <span class="name">John Smith</span>
                    <span class="handle">Handle</span>
                    <span class="user-id">ID</span>
                </div>                
            </li>
            <li>                
                <div>
                    <img src="http://placehold.it/50x50/?text=avatar"/>
                    <span class="name">John Smith</span>
                    <span class="handle">Handle</span>
                    <span class="user-id">ID</span>
                </div>                
            </li>
        </ul>
    </li>
    <li>
        <div>
            <img src="http://placehold.it/50x50/?text=avatar"/>
            <span class="name">John Smith</span>
            <span class="handle">Handle</span>
            <span class="user-id">ID</span>
        </div>
    </li>
    <li>
        <div>
            <img src="http://placehold.it/50x50/?text=avatar"/>
            <span class="name">John Smith</span>
            <span class="handle">Handle</span>
            <span class="user-id">ID</span>
        </div>
    </li>
</ul>

ul {
    list-style: none;
}
img {
    border: 0;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 15px;
}
span {
    display: inline-block;
}
li > div {
    margin: 15px 0;
}
.name,
.handle {
    width: 100px;
}

jsFiddle：http://jsfiddle.net/jrp46cue/