web-dev-qa-db-ja.com

VuetifyJS DataTableセルのデフォルト幅を変更する

VuetifyJS Data Table を使用しており、各ヘッダーセルのエントリをできる限り近くに移動する必要があります。私は各ヘッダーにwidthを追加しようとしましたが、うまくいきませんでした-下に行くことができない事前定義された幅があるようです。

更新：これはどのように見えるかです-各行間のマージンは10pxに固定する必要があります： enter image description here

CodePenの例を次に示します。

https://codepen.io/anon/pen/ejEpKZ?&editors=101

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

それらを近づける方法は？

javascriptvue.jsdatatablevuetify.js
10
Tom

別の空のヘッダーを追加し、すべての空きスペースを埋めるために空を除く、すべての列のwidthをmin value（1％）に設定できます。また、空のtdをテーブルボディテンプレートに追加して、灰色の行分割線を表示する必要があります。

Codepenを参照してください： https://codepen.io/anon/pen/WKXwOR

12
Max Sinev

CSSで遊んで、クラスをオーバーライドできます。 tdのwidthを変更してみてください

ここにコードペンがあります： https://codepen.io/anon/pen/gjxPMJ

また、tdのテキストを左に揃えました：<td class="text-xs-left">

幅の値を試して目的のものを取得するだけで、パーセンテージも使用できます。

0
V. Sambor