Set fixed width of service-list table.

This commit is contained in:
Santiago Lamora 2019-12-04 11:44:14 +01:00
parent 50bcd89fcd
commit 9a33f3363a
2 changed files with 20 additions and 1 deletions

View File

@ -93,8 +93,9 @@ h1.service-name {
font: 16px/21px Roboto; font: 16px/21px Roboto;
} }
.service-list { .table.service-list {
margin-top: 2rem; margin-top: 2rem;
table-layout: fixed;
} }
/** TODO update theme instead of overriding **/ /** TODO update theme instead of overriding **/
.service-list thead.thead-dark th { .service-list thead.thead-dark th {
@ -103,6 +104,10 @@ h1.service-name {
border-color: transparent; border-color: transparent;
} }
/** /TODO **/ /** /TODO **/
.table.service-list td,
.table.service-list th {
vertical-align: middle;
}
.service-list thead.thead-dark th:first-of-type { .service-list thead.thead-dark th:first-of-type {
border-top-left-radius: .25rem; border-top-left-radius: .25rem;
@ -112,6 +117,14 @@ h1.service-name {
border-top-right-radius: .25rem; border-top-right-radius: .25rem;
} }
.service-list tfoot td:first-of-type {
border-bottom-left-radius: .25rem;
}
.service-list tfoot td:last-of-type {
border-bottom-right-radius: .25rem;
}
.service-list tbody { .service-list tbody {
background: white; background: white;
color: #343434; color: #343434;

View File

@ -6,6 +6,12 @@
<h1 class="service-name">{{ service.verbose_name }}</h1> <h1 class="service-name">{{ service.verbose_name }}</h1>
<p class="service-description">{{ service.description }}</p> <p class="service-description">{{ service.description }}</p>
<table class="table service-list"> <table class="table service-list">
<colgroup>
<col span="1" style="width: 25%;">
<col span="1" style="width: 50%;">
<col span="1" style="width: 5%;">
<col span="1" style="width: 20%;">
</colgroup>
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">{% trans "Mail address" %}</th> <th scope="col">{% trans "Mail address" %}</th>