我的桌子有网格布局。但是,当宽度减小时,并非所有列都具有相同的宽度。 Кількість
跨越两个2fr列。因此,我希望它具有与两列相同的宽度:1
和грн
。 source code
/* The layout for invoice items */
.items-grid {
width: 680px;
display: grid;
grid-template-columns: 2fr 4fr 60% 2fr 2fr 3fr 3fr;
grid-template-rows: auto;
border: 3px solid black;
}
/* All cells should be aligned vertically by center */
.items-grid > dt {
display: grid;
align-items: center;
}
/* Do not display right/bottom border for last column/row */
.items-grid > dt:not(:nth-child(7n)) {
border-right: 2px solid black;
}
.items-grid > dt:not(:nth-last-child(-n+7)) {
border-bottom: 2px solid black;
}
/* N, Code */
.items-grid > dt:nth-child(7n +1),
.items-grid > dt:nth-child(7n +2)
{
justify-items: center;
}
/* Qty, Price, Suma */
.items-grid > dt:nth-child(7n +4),
.items-grid > dt:nth-child(7n +6),
.items-grid > dt:nth-child(7n +7)
{
justify-items: end;
}
/** STYLING FIRST LINE **/
.items-grid > dt:nth-child(-n+7) {
font-weight: bold;
justify-items: center;
text-align: center;
}
/* 'Quantity' column is splitted by two later */
.items-grid > dt:nth-child(4) {
grid-column-start: span 2;
}
/* added for parity cell should be hidded */
.items-grid > dt:nth-child(5) {
display: none;
}
<dl class="items-grid">
<dt>№
<dt>Код
<dt>Товари (роботи, послуги)
<dt>Кіль<wbr>кість
<dt>
<dt>Ціна з ПДВ
<dt>Сума з ПДВ
<dt>1
<dt>MED000754
<dt>Надання в строкове платне користування Віртуальної інфраструктури (TuchaBit)
<dt>1
<dt>грн
<dt>630,62
<dt>630,62
<dt>2
<dt>MED000754
<dt>Надання в строкове платне користування Віртуальної інфраструктури (TuchaBit)
<dt>1
<dt>грн
<dt>630,62
<dt>630,62
</dl>
UPD
这仅在FF中被破坏