CSS - フレキシボックスグリッドの背景色 - 列のレイアウト - 一番上の行、最初の列

ここではcodepenへのリンクです： enter link description here CSS - フレキシボックスグリッドの背景色 - 列のレイアウト - 一番上の行、最初の列

私は一番上の行と最初の列の背景色を変更したいです。

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%; 
 
\t padding:0 1em; 
 
\t 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; 
 
\t \t 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>

出典

2017-05-22 Michael JDI

に応じてレイアウトを作るお勧め： 'div.Grid行{パディング：0;} 'それは全体に広がっていますが、私はあなたが探しているものであるかどうかはわかりません。 – blackandorangecat

質問：x軸（行）がテキストに対して動的に調整されるように、各セルをどのように調整できますか？テキスト2Brief Descriptiondfasdfは長く、そのセルの高さが高くなるようにプッシュします。ありがとう！ –

それはあなたのレイアウトを持つ権利ではない何か。

あなたは言う：grid-rowしかし、それを列として使用します。 Grid-cellは列とは関係がありません。列内のランダムなdivであり、クラスはgrid-rowです。

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%; 
 
\t padding:0 1em; 
 
\t 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; 
 
\t \t 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>

を参照してくださいしかし、私はあなたがこの要件

出典

2017-05-22 14:11:51

CSS - フレキシボックスグリッドの背景色 - 列のレイアウト - 一番上の行、最初の列

答えて

関連する問題