1

Have a Table call in Index.vue:

 <utilization-table :title="table.title" :columns="table.columns" :rows="table.rows">
   <template scope="data>      
        <td class="th_normal">{{data.row.name}}</td>
   </template>
 </utilization-table>

The Table Template is UtilizationTable.vue:

<template>
<div>
  <h3 v-html="title"></h3>
    <table class="table table-striped table-hover">
       <thead>
        <tr>
          <th v-if="selectable" class="table-view-pf-select" aria-label="Select all rows">
            <label>
              <span class="sr-only">Select all rows</span>
              <input type="checkbox" @change="changeSelectAll">
            </label>
          </th>
          <th v-for="column in columns">{{column}}</th>
        </tr>
      </thead>
      <tbody>
        <utilization-table-row ref="row" v-for="(row, i) in rows" :key="i">
          <slot :row="row"></slot>
        </utilization-table-row>
      </tbody>
    </table>
</div>
</template>

With a Row as UtilizationTableRow.vue:

<template>
  <tr role="row">
    <slot></slot>
  </tr>
</template>

It'd like to style the first "td" in the table to 130px. Since it is a slot, I'm not sure how to do this.

Normally, if my table is

<table>
    <tr>
      <td>
      </td>
    </tr>
</table>

I could just do:

<style> table tr td:first-child, table tr td:first-child {
    width: 130px !important; 
} 
</style>

However, that isn't taking hold.

user1093111
  • 1,091
  • 5
  • 21
  • 47

0 Answers0