Question

我想要以下布局：

Date       2015-10-23     2015-10-21     2015-11-21
User1      10 min         20 min         30 min
User2      20 min         05 min         03 min
User3      03 min         93 min         10 min
Notes      Some note      Some other     Nothing to note
           with new line  note
Status     Done           Interrupted    Ongoing

第一列是标题列，以下列是由angular生成的。 UserX行也是动态生成的。对我来说，它似乎是一个翻转的＆＃34;表，其中列更像行。我不认为它看起来像一张桌子（保持细胞高度为行，宽度为柱子）。这里最好的方法是什么？是否可以使用html table + CSS？我的模型看起来像：

 [
    {
        date: '2015-10-23',
        notes: 'some note',
        status: 'status',
        participants: [
             {
                  name: 'User1',
                  duration: '1 minute'
             },
             {
                  name: 'User2',
                  duration: '9 minute'
             }
        ]
 ]

我尝试将表格组成普通表格，即Date, User1, User2...作为第一行，然后＆＃34;翻转＆＃34;具有以下css的表格：

tr { display: block; float: left; }
th, td { display: block;  }

但是这样一来，细胞的高度就没有了，一条多线笔记已经打破了＃34;桌子。

https://jsfiddle.net/alecc/cvf5vp8p/7/

我尝试在角度控制器中以这样的方式组合数据，但我也不喜欢这种方法。

https://jsfiddle.net/alecc/gzc13fh9/2/

Answer 1

为什么不添加＆＃39;＆＃39;在每个＆＃39;：

：

<table>
  <tr>
    <th>Datum</th>
    <td ng-repeat='datum in datums'>{{datum}}</td>
  </tr>
  <tr ng-repeat='name in teilnehmerListe'>
    <th >{{name}}</th>
    <td ng-repeat="attr in name">{{attr}}</td>
  </tr>
  <tr>
    <th>Sonstige Teilnehmer?</th>
    <td ng-repeat='sonstige in sonstiges'>{{sonstige}}</td>
  </tr>
  <tr>
    <th>Bemerkungen</th>
    <td ng-repeat='bemerkungen in bemerkungens'>{{bemerkungen}}</td>
  </tr>
</table>

PS：对于样式，您应该使用<td> colspan属性。

Answer 2

在我某种固定的桌面布局之后，我似乎已经找到了。

table {
  table-layout: fixed;
}

th, td {   
width: 125px;
}

JSfiddle Demo

AngularJs / CSS：水平布局中的表宽动态行和列

2 个答案: