我怎样才能列宽与数据网格

Question

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

在移动显示器上，这个 table 比屏幕宽，我如何设置列的宽度使其缩小。

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

我相信应该可以为移动设备上的输入创建类似的东西。

Answer 1

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

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 之后，我突然想到也许您可以使用简单的 table。使用

覆盖默认输入样式

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

并使用标准 table 元素

<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

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

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

我怎样才能列宽与数据网格

How can i column width with datagrid

vmware-clarity