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.