webapp: added css table-responsive for lower resolutions

This commit is contained in:
fischaxe 2023-04-10 10:45:24 +02:00
parent 12d7349699
commit 994a543b87

View File

@ -17,29 +17,31 @@
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('inverterchannelinfo.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th>
<th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<template v-if="key != 'name' && property">
<th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
<td style="text-align: right">
{{ $n(property.v, 'decimal', {
minimumFractionDigits: property.d,
maximumFractionDigits: property.d})
}}
</td>
<td>{{ property.u }}</td>
</template>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('inverterchannelinfo.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th>
<th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<template v-if="key != 'name' && property">
<th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
<td style="text-align: right">
{{ $n(property.v, 'decimal', {
minimumFractionDigits: property.d,
maximumFractionDigits: property.d})
}}
</td>
<td>{{ property.u }}</td>
</template>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>