1

我在 Angular 5 应用程序中有一个数据网格：

<clr-datagrid>
  <clr-dg-column>a</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>

  <clr-dg-row>
    <clr-dg-cell>1</clr-dg-cell>
    <clr-dg-cell>2</clr-dg-cell>
    <clr-dg-cell>3</clr-dg-cell>
    <clr-dg-cell>4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

在移动显示器上，此表比屏幕宽，如何设置列的宽度以使其缩小。

编辑：我想要完成的是重新创建这个记分表：https ://boardgamegeek.com/image/3360178/clans-caledonia

我相信应该可以在移动设备上创建接近它的输入。

4

2 回答 2

2

您可以通过在列上使用 css 类来设置列宽

HTML

<clr-datagrid>
  <clr-dg-column class="width1">a</clr-dg-column>
  <clr-dg-column class="width2">b</clr-dg-column>
  <clr-dg-column class="width3">b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>

  <clr-dg-row *ngFor="let i of [1,2,3,4,5]">
    <clr-dg-cell >1</clr-dg-cell>
    <clr-dg-cell >2</clr-dg-cell> 
    <clr-dg-cell >3</clr-dg-cell>
    <clr-dg-cell>4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

CSS

.width1 {
  width: 15%;
}

.width2 {
  width: 25%;
}

.width3 {
  width: 35%;
}

更新 查看 StackBlitz 后，我突然想到，也许您可​​以只使用一个简单的表格。覆盖默认输入样式

td > input {
  width: 1.5rem;
  min-width: 1.5rem;
}

并使用标准表格元素

<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4,5,6]">
            <td>Type {{item}}</td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
        </tr>
    </tbody>
</table>

看起来它会在窄宽度的视口上塌陷。

这是您修改后的 StackBlitz：https ://stackblitz.com/edit/angular-dbzvmg

于 2018-02-21T17:23:12.457 回答
1

这似乎可行，尽管必须向所有列和所有单元格添加一个类似乎不太理想。

<clr-datagrid>
  <clr-dg-column class="width">a</clr-dg-column>
  <clr-dg-column class="width">b</clr-dg-column>
  <clr-dg-column class="width">b</clr-dg-column>
  <clr-dg-column class="width">b</clr-dg-column>

  <clr-dg-row *ngFor="let i of [1,2,3,4,5]">
    <clr-dg-cell class="width">1</clr-dg-cell>
    <clr-dg-cell class="width">2</clr-dg-cell> 
    <clr-dg-cell class="width">3</clr-dg-cell>
    <clr-dg-cell class="width">4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

风格

.width {
  width: 25%;
  min-width: 20%;
}
于 2018-02-22T09:30:04.443 回答