为什么列宽被打破?

时间:2018-09-06 09:47:48

标签: css html5 css3 grid-layout css-grid

我的桌子有网格布局。但是,当宽度减小时,并非所有列都具有相同的宽度。 Кількість跨越两个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>

enter image description here

UPD
这仅在FF中被破坏

0 个答案:

没有答案