VerticalTableRowTagHelper

Used the render a table row with the label in the left column and the value on the right.

Usage

<table class="table-vertical">
    <tbody>
        <tr-display asp-for="Property1"></tr-display>
        <tr-display asp-for="Property2" label="Custom Label Name"></tr-display>
    </tbody>
</table>

-- output --

<table>
    <tbody>
        <tr>
            <th>Property1 Display Name</th>
            <td>Property1 Value</td>
        </tr>
        <tr>
            <th>Custom Label Name</th>
            <td>Property2 Value</td>
        </tr>
    </tbody>
</table>

Attributes

Name	Required	Data Type	Description
asp-for	Required	ModelExpression	The property to display
label	Optional	String	Overrides the label name that will be displayed
template	Optional	String	Name of the DisplayTemplate that will used to display the value of the property

CSS

This CSS isn't required but is suggested

table.table-vertical {
    th, td {
        padding: 7px;
    }

    th {
        text-align: right;
        font-weight: 600;
        min-width: 100px;

        &:after {
            content:':';
        }
    }

    &.table-vertical-sm {
        th, td {
            padding:1px 4px;
        }
    }
}