Question

以下是codepen的链接： enter link description here

我想更改顶行和第一列的背景颜色。

请参阅附带的css和html的codepen。

我正在做：但是蓝色并没有穿过整排。

.Grid {
  display: flex;
  flex-wrap: nowrap; 
  word-wrap: break-word !important;  
}
.Grid-column {
  //flex: 1;
  flex-grow: 1;
  padding:0;
  flex-direction: column;
  word-wrap: break-word !important; 
  
}
.Grid-cell {
   width: 100%;
   flex: 1;
   word-wrap: break-word !important;   
   min-width: 50%;
	 padding:0 1em;
	 box-sizing:border-box;
}
.Grid-cell:nth-child(2n+1) {
  background: lightgray;
  word-wrap: break-word !important;   
}  

.Grid-row:first-child {
  background:dodgerblue;
  font-weight: bold;

}

.Grid-cell:first-child {
  background: dodgerblue;
  font-weight: bold;
		padding-top:1em;
}
.Grid-cell:first-child {
  background: dodgerblue;
  font-weight: bold;
}

<div id=event-history-view>
    <div class="Grid">
        <div class="Grid-column">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">1Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
        <div class="Grid-column">
            <div class="Grid-cell">2Change Date</div>
            <div class="Grid-cell">2Brief Descriptionasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</div>
            <div class="Grid-cell">2Description</div>
            <div class="Grid-cell">2Commentary</div>
            <div class="Grid-cell">2Severity Name</div>
            <div class="Grid-cell">2Ticker Type Name</div>
            <div class="Grid-cell">2Disclosure Code</div>
            <div class="Grid-cell">2Disclosure Name</div>
            <div class="Grid-cell">2Status Name</div>
            <div class="Grid-cell">2Category Name</div>
            <div class="Grid-cell">2Publish Mode Name</div>
            <div class="Grid-cell">2Agreement Date</div>
            <div class="Grid-cell">2Deletion Reason</div>
            <div class="Grid-cell">2Updated By</div>
            <div class="Grid-cell">2Event Approval Status Name</div>
            <div class="Grid-cell">2Event Approval Commentary Approved</div>
            <div class="Grid-cell">2Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">2Event Approval Comments</div>
            <div class="Grid-cell">2Event Approval Updated By</div>
        </div>
        <div class="Grid-column">
            <div class="Grid-cell">3Change Date</div>
            <div class="Grid-cell">3Brief Description</div>
            <div class="Grid-cell">2Description</div>
            <div class="Grid-cell">3Commentary</div>
            <div class="Grid-cell">3Severity Name</div>
            <div class="Grid-cell">3Ticker Type Name</div>
            <div class="Grid-cell">3Disclosure Code</div>
            <div class="Grid-cell">3Disclosure Name</div>
            <div class="Grid-cell">3Status Name</div>
            <div class="Grid-cell">3Category Name</div>
            <div class="Grid-cell">3Publish Mode Name</div>
            <div class="Grid-cell">3Agreement Date</div>
            <div class="Grid-cell">3Deletion Reason</div>
            <div class="Grid-cell">3Updated By</div>
            <div class="Grid-cell">3Event Approval Status Name</div>
            <div class="Grid-cell">3Event Approval Commentary Approved</div>
            <div class="Grid-cell">3Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">3Event Approval Comments</div>
            <div class="Grid-cell">3Event Approval Updated By</div>
        </div>
        <div class="Grid-column">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
        <div class="Grid-column">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
        <div class="Grid-column">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
    </div>
</div>

Answer 1

你的布局不对劲。

你说：grid-row但你用它作为列。 Grid-cell与列无关，它们只是列grid-row列中的随机div。

说I want to change the background color of the top row你不是指你的html中的任何一行。没有一个

我猜你的意思是你希望所有第一个grid-cell的背景为蓝色。因此，您需要从grid-row列中删除填充，然后将其添加到.grid-cell。

请参阅下面的代码段或jsFiddle

// .grid {
//   border: solid 1px #e7e7e7;
// }

// .grid__row {
//   display: flex;
//   background: whitesmoke;
// }

// .grid__item {
//   flex: 1;
//   padding: 12px;
//   border: solid 1px #e7e7e7;
// }

.Grid {
  display: flex;
  flex-wrap: nowrap; 
  word-wrap: break-word !important;  
}
.Grid-row {
  //flex: 1;
  flex-grow: 1;
  padding:0;
  flex-direction: column;
  word-wrap: break-word !important; 
  
}
.Grid-cell {
   width: 100%;
   flex: 1;
   word-wrap: break-word !important;   
   min-width: 50%;
	 padding:0 1em;
	 box-sizing:border-box;
}
.Grid-cell:nth-child(2n+1) {
  background: lightgray;
  word-wrap: break-word !important;   
}  

.Grid-row:first-child {
  background:dodgerblue;
  font-weight: bold;

}

.Grid-cell:first-child {
  background: dodgerblue;
  font-weight: bold;
		padding-top:1em;
}
.Grid-cell:first-child {
  background: dodgerblue;
  font-weight: bold;
}

<div id=event-data>
    Event Data Info Goes Here

</div>

<div id=event-history-view>
    <div class="Grid">
        <div class="Grid-row">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">1Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
        <div class="Grid-row">
            <div class="Grid-cell">2Change Date</div>
            <div class="Grid-cell">2Brief Description</div>
            <div class="Grid-cell">2Description</div>
            <div class="Grid-cell">2Commentary</div>
            <div class="Grid-cell">2Severity Name</div>
            <div class="Grid-cell">2Ticker Type Name</div>
            <div class="Grid-cell">2Disclosure Code</div>
            <div class="Grid-cell">2Disclosure Name</div>
            <div class="Grid-cell">2Status Name</div>
            <div class="Grid-cell">2Category Name</div>
            <div class="Grid-cell">2Publish Mode Name</div>
            <div class="Grid-cell">2Agreement Date</div>
            <div class="Grid-cell">2Deletion Reason</div>
            <div class="Grid-cell">2Updated By</div>
            <div class="Grid-cell">2Event Approval Status Name</div>
            <div class="Grid-cell">2Event Approval Commentary Approved</div>
            <div class="Grid-cell">2Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">2Event Approval Comments</div>
            <div class="Grid-cell">2Event Approval Updated By</div>
        </div>
        <div class="Grid-row">
            <div class="Grid-cell">3Change Date</div>
            <div class="Grid-cell">3Brief Description</div>
            <div class="Grid-cell">2Description</div>
            <div class="Grid-cell">3Commentary</div>
            <div class="Grid-cell">3Severity Name</div>
            <div class="Grid-cell">3Ticker Type Name</div>
            <div class="Grid-cell">3Disclosure Code</div>
            <div class="Grid-cell">3Disclosure Name</div>
            <div class="Grid-cell">3Status Name</div>
            <div class="Grid-cell">3Category Name</div>
            <div class="Grid-cell">3Publish Mode Name</div>
            <div class="Grid-cell">3Agreement Date</div>
            <div class="Grid-cell">3Deletion Reason</div>
            <div class="Grid-cell">3Updated By</div>
            <div class="Grid-cell">3Event Approval Status Name</div>
            <div class="Grid-cell">3Event Approval Commentary Approved</div>
            <div class="Grid-cell">3Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">3Event Approval Comments</div>
            <div class="Grid-cell">3Event Approval Updated By</div>
        </div>
        <div class="Grid-row">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
        <div class="Grid-row">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
        <div class="Grid-row">
            <div class="Grid-cell">Change Date</div>
            <div class="Grid-cell">Brief Description</div>
            <div class="Grid-cell">Description</div>
            <div class="Grid-cell">Commentary</div>
            <div class="Grid-cell">Severity Name</div>
            <div class="Grid-cell">Ticker Type Name</div>
            <div class="Grid-cell">Disclosure Code</div>
            <div class="Grid-cell">Disclosure Name</div>
            <div class="Grid-cell">Status Name</div>
            <div class="Grid-cell">Category Name</div>
            <div class="Grid-cell">Publish Mode Name</div>
            <div class="Grid-cell">Agreement Date</div>
            <div class="Grid-cell">Deletion Reason</div>
            <div class="Grid-cell">Updated By</div>
            <div class="Grid-cell">Event Approval Status Name</div>
            <div class="Grid-cell">Event Approval Commentary Approved</div>
            <div class="Grid-cell">Event Approval Needs Secondary Approval</div>
            <div class="Grid-cell">Event Approval Comments</div>
            <div class="Grid-cell">Event Approval Updated By</div>
        </div>
    </div>
</div>

<div>
    <label class="error" *ngIf="error">Error Loading Data {{"  " + errorMessage}}</label>
</div>

但我建议你根据自己的要求制作布局

CSS - Flexbox网格上的背景颜色 - 列布局 - 顶行，第一列

1 个答案: