Question

我在角度5 app中有一个数据网格：

<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

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

Answer 1

您可以使用列

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

Answer 2

这似乎有效，虽然必须为所有列添加一个类，但所有单元格似乎都不太理想。

<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%;
}

我如何使用datagrid列宽

2 个答案: