定義リストとグリッドレイアウトを使用してテーブルを作成します -- html フィールド と css フィールド と css-grid フィールド 関連 問題

Create a table using definition list and grid layout












8
vote

問題

日本語

<dl> および display: grid

を使用して、疑似テーブルを作成しようとしました。

実際には機能します。唯一の問題は、私が行を定義するために醜い方法を使うことを強制されたということです。それは完全に手動の方法です。そのため、テーブルに30行がある場合は、それらのそれぞれに対して dt + dd + ... + dd を繰り返すのに本当に困難になります。

この問題をどのように固定するか?

(マークダウン用のものです)。

 <コード> dl {      display: grid;      grid-template-columns: repeat(3, 1fr);  }    dt {      text-align: center;  }    dd {      margin-left: 0;  }    dt, dd {      border: 1px solid lightgray;      padding: 0 1em;  }    /* Ugly part   * (Red, yellow, and green colors are just for demo)   */    dt {      grid-row-start: 1;  }    dt + dd {      grid-row-start: 2;      color: rgb(244, 67, 54);  }    dt + dd + dd {      grid-row-start: 3;      color: rgb(255, 152, 0);  }    dt + dd + dd + dd {      grid-row-start: 4;      color: rgb(76, 175, 80);  }  
 <コード> <dl>      <dt><p>Term 1</p></dt>      <dd>          <p>Definition of term 1 long long long long</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>      </dd>      <dd><p>Definition of term 1</p></dd>      <dd><p>Definition of term 1</p></dd>        <dt><p>Term 2</p></dt>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>        <dt><p>Term 3</p></dt>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>  </dl>  
英語

Here is my attempt to create pseudo-table, using <dl> and display: grid.

Actually, it works. The only problem, is that I forced to use ugly way to define rows. It is completely manual way. So if I have 30 rows in table, it will be really very dumb to repeat dt + dd + ... + dd for each of them.

How this issue could be fixed?

(I don't want to use real tables, because it is for Markdown).

dl {      display: grid;      grid-template-columns: repeat(3, 1fr);  }    dt {      text-align: center;  }    dd {      margin-left: 0;  }    dt, dd {      border: 1px solid lightgray;      padding: 0 1em;  }    /* Ugly part   * (Red, yellow, and green colors are just for demo)   */    dt {      grid-row-start: 1;  }    dt + dd {      grid-row-start: 2;      color: rgb(244, 67, 54);  }    dt + dd + dd {      grid-row-start: 3;      color: rgb(255, 152, 0);  }    dt + dd + dd + dd {      grid-row-start: 4;      color: rgb(76, 175, 80);  }
<dl>      <dt><p>Term 1</p></dt>      <dd>          <p>Definition of term 1 long long long long</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>      </dd>      <dd><p>Definition of term 1</p></dd>      <dd><p>Definition of term 1</p></dd>        <dt><p>Term 2</p></dt>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>        <dt><p>Term 3</p></dt>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>  </dl>
</div
        
         
         

回答リスト

10
 
vote
vote
ベストアンサー
 

想定...あなたはFirefoxまたはChromeの上にありますが、IE / Edge:P、ここに、任意の数の用語と任意の数の定義を持つ作業ソリューション:

➡️ codepen

説明:

  1. 列の後のグリッド列の埋め➡️ grid-auto-flow: column;
  2. (グリッド項目)各項は1行目にあるべきであるため、その定義はそれを下回っています↓<コード> dt { grid-row-start: 1 } は「次の列を「 十分な明示的な行を作成する(SAP、50)が、指定された用語が少なくともnの定義を持っている場合にのみ、行N + 1は(任意の高さを持ちます)が表示されます(特定の用語の最大定義が3の場合は4行が表示されます。なし4)<コード> grid-template-rows: repeat(50, min-content);
  3. は未定義の列/条件を持つことを試みましたが、明示的な列でそれを達成することはできませんでした(のようなものが欲しかったが、0. minmax()を使用して " min | availのmax-content)。暗黙の列を持つチャームのように機能しました:Â<コード> grid-auto-columns: 1fr;
  4.  <コード> dl {      display: grid;      grid-auto-flow: column;      /* doesn't assume 3 terms but N */      grid-auto-columns: 1fr;      grid-template-rows: repeat(50, min-content); /* doesn't assume 3 defs but M<50 */  }    dt {      grid-row-start: 1; /* reset, next column */  }  
 

Assuming... you're on Firefox or Chrome but not IE/Edge :p, here's a working solution with any number of terms and any number of definitions for each term:

➡️ Codepen

Explanations:

  1. filling the grid column after column ➡️ grid-auto-flow: column;
  2. (grid items) each term should be on row 1, so its definitions are below it ➡️ dt { grid-row-start: 1 } acts like "next column please"
  3. Create enough explicit rows (say, 50) but the row N+1 should show (have any height) only if any given term has at least N definitions (4 rows visible if the max definitions for a given term is 3. None has 4) ➡️ grid-template-rows: repeat(50, min-content);
  4. Then tried to have an undefined number of columns/terms but I couldn't achieve it with explicit columns (I wanted something like "1fr if there's content but 0 otherwise" with minmax(), min|max-content to no avail). Worked like a charm with implicit columns though: ➡️ grid-auto-columns: 1fr;

dl {      display: grid;      grid-auto-flow: column;      /* doesn't assume 3 terms but N */      grid-auto-columns: 1fr;      grid-template-rows: repeat(50, min-content); /* doesn't assume 3 defs but M<50 */  }    dt {      grid-row-start: 1; /* reset, next column */  }
</div
 
 
   
   
3
 
vote

は、主に、人工の行数を必要とせずに簡単に答えます。

グリッドオートフローを行に変更し、物事が簡単になります。

 <コード> dl {      display: grid;      grid-auto-columns: 1fr;      grid-auto-flow: row;  }    dt {      grid-row: 1;      background-color: lightgreen;  }    dt, dd {      border: solid 1px silver;      margin: 0;  }  
 <コード>     <dl>          <dt><p>Term 1</p></dt>          <dd>              <p>A Definition of term 1 long long long long Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore impedit cum necessitatibus corporis, ratione culpa nesciunt corrupti recusandae voluptate, sint magni enim ullam quo, ipsum. Voluptatibus quos aliquid, optio!</p>              <p>Lorem ipsum...</p>              <p>Lorem ipsum...</p>              <p>Lorem ipsum...</p>          </dd>          <dd><p>B Definition of term 1</p></dd>          <dd><p>C Definition of term 1</p></dd>          <dd>May the 4th</dd>            <dt><p>Term 2</p></dt>          <dd><p>A Definition of term 2</p></dd>          <dd><p>B Definition of term 2</p></dd>          <dd><p>C Definition of term 2</p></dd>            <dt><p>Term 3</p></dt>          <dd><p>A Definition of term 3</p></dd>          <dd><p>B Definition of term 3</p></dd>          <dd><p>C Definition of term 3</p></dd>      </dl>  
 

Based largely on FelipeAls answer, but simpler and without need for an artificial number of rows.

Just change grid-auto-flow to row, and things become easier.

dl {      display: grid;      grid-auto-columns: 1fr;      grid-auto-flow: row;  }    dt {      grid-row: 1;      background-color: lightgreen;  }    dt, dd {      border: solid 1px silver;      margin: 0;  }
    <dl>          <dt><p>Term 1</p></dt>          <dd>              <p>A Definition of term 1 long long long long Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore impedit cum necessitatibus corporis, ratione culpa nesciunt corrupti recusandae voluptate, sint magni enim ullam quo, ipsum. Voluptatibus quos aliquid, optio!</p>              <p>Lorem ipsum...</p>              <p>Lorem ipsum...</p>              <p>Lorem ipsum...</p>          </dd>          <dd><p>B Definition of term 1</p></dd>          <dd><p>C Definition of term 1</p></dd>          <dd>May the 4th</dd>            <dt><p>Term 2</p></dt>          <dd><p>A Definition of term 2</p></dd>          <dd><p>B Definition of term 2</p></dd>          <dd><p>C Definition of term 2</p></dd>            <dt><p>Term 3</p></dt>          <dd><p>A Definition of term 3</p></dd>          <dd><p>B Definition of term 3</p></dd>          <dd><p>C Definition of term 3</p></dd>      </dl>
</div
 
 
     
     
2
 
vote

1つの代替案(クロスブラウザ)アプローチは、親の定義リストの相対位置決めを与えることです:

<事前> <コード> dl {position: relative;} その後、定義の内側にすべてのサブ要素を絶対位置にします。 <事前> <コード> dt, dd {display: block; position: absolute;}

(当然のことながら、絶対位置決めを使用しているので、これはあなたが各データ列の最大幅と各データ行の最大の高さの最大幅とを理解している場合には、実行可能な代替案になるでしょう。している)

このインスタンスでは、 dt および dd ごとに明示的な left 値を指定する必要がありますが、宣言は毎回同じです。そのようなインクリット(3回参照されている)とは別に...

例:

<事前> <コード> Index 2: dt:nth-of-type(2), dt:nth-of-type(2) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (2 - 1));} Index 3: dt:nth-of-type(3), dt:nth-of-type(3) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (3 - 1));} Index 4: dt:nth-of-type(4), dt:nth-of-type(4) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (4 - 1));}

ETC。

実用的な例:

 <コード> dl {  position: relative;  }    dt {  text-align: center;  font-weight: bold;  }    dt, dd {  display: block;  position: absolute;  width: 200px;  height: 50px;  min-height: 50px;  margin-left: 0;  border: 1px solid lightgray;  padding: 0 1em;  vertical-align: top;  }    dt {  top: 0;  }    dd:nth-of-type(3n - 2) {  top: 50px;  height: 200px;  color: rgb(244, 67, 54);  }    dd:nth-of-type(3n - 1){  top: 250px;  color: rgb(255, 152, 0);  }    dd:nth-of-type(3n) {  top: 300px;  color: rgb(76, 175, 80);  }    /* LEFT CO-ORDINATES */    dt:nth-of-type(2), dt:nth-of-type(2) ~ dd {  left: calc((1px + 1em + 200px + 1em + 1px) * (2 - 1));  }    dt:nth-of-type(3), dt:nth-of-type(3) ~ dd {  left: calc((1px + 1em + 200px + 1em + 1px) * (3 - 1));  }  
 <コード> <dl>      <dt><p>Term 1</p></dt>      <dd>          <p>Definition of term 1 long long long long</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>      </dd>      <dd><p>Definition of term 1</p></dd>      <dd><p>Definition of term 1</p></dd>        <dt><p>Term 2</p></dt>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>        <dt><p>Term 3</p></dt>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>  </dl>  
 

One alternative (cross-browser) approach is to give the parental definition list relative positioning:

dl {position: relative;} 

and then give every sub-element inside the definition list an absolute position.

dt, dd {display: block; position: absolute;} 

(Naturally, since we're now using absolute positioning, this is only going to be a viable alternative if you have a good idea about what the maximum width of each data column and maximum height of each data row ought to be).

In this instance you will still have to give an explicit left value for each dt and dd, but the declaration is identical each time apart from the index (referenced three times) which increments like so...

Example:

Index 2: dt:nth-of-type(2), dt:nth-of-type(2) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (2 - 1));} Index 3: dt:nth-of-type(3), dt:nth-of-type(3) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (3 - 1));} Index 4: dt:nth-of-type(4), dt:nth-of-type(4) ~ dd {left: calc((1px + 1em + 200px + 1em + 1px) * (4 - 1));} 

etc.

Working Example:

dl {  position: relative;  }    dt {  text-align: center;  font-weight: bold;  }    dt, dd {  display: block;  position: absolute;  width: 200px;  height: 50px;  min-height: 50px;  margin-left: 0;  border: 1px solid lightgray;  padding: 0 1em;  vertical-align: top;  }    dt {  top: 0;  }    dd:nth-of-type(3n - 2) {  top: 50px;  height: 200px;  color: rgb(244, 67, 54);  }    dd:nth-of-type(3n - 1){  top: 250px;  color: rgb(255, 152, 0);  }    dd:nth-of-type(3n) {  top: 300px;  color: rgb(76, 175, 80);  }    /* LEFT CO-ORDINATES */    dt:nth-of-type(2), dt:nth-of-type(2) ~ dd {  left: calc((1px + 1em + 200px + 1em + 1px) * (2 - 1));  }    dt:nth-of-type(3), dt:nth-of-type(3) ~ dd {  left: calc((1px + 1em + 200px + 1em + 1px) * (3 - 1));  }
<dl>      <dt><p>Term 1</p></dt>      <dd>          <p>Definition of term 1 long long long long</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>          <p>Lorem ipsum...</p>      </dd>      <dd><p>Definition of term 1</p></dd>      <dd><p>Definition of term 1</p></dd>        <dt><p>Term 2</p></dt>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>      <dd><p>Definition of term 2</p></dd>        <dt><p>Term 3</p></dt>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>      <dd><p>Definition of term 3</p></dd>  </dl>
</div
 
 
 
 

関連する質問

3  グリッドレイアウトが整列しない  ( Grid layout failing to align ) 
これを実現しようとしていますが、 nav header タグを左側に埋めます。 > <コード> html { width: 100%; overflow: hidden; } body { display: g...

0  グリッド要素は太平洋のように幅です  ( Grid elements are as wide as the pacific ocean ) 
グリッドの問題があります。何らかの理由で、列は私が望むのと同じくらい幅の約5倍であり、彼らがちょうど同じ距離に滞在しています。 HTML: <事前> <コード> <div class=wrapper> <a href="A.html" id="A"></a...

6  パーセンテージCSS3グリッド列の幅を制限する方法  ( How to limit the width of percentaged css3 grid columns ) 
特定の最大幅に囲まれている可能性がある柔軟な列のWebページレイアウトを作成します。 たとえば、入手可能な水平方向の30%がかかるが、200ピクセルより広く成長しないサイドバーメニュー。 CSS Flexbox 、私はこのような解決策と共に行くでしょう: ...

0  画像はSafariの図を重複しています  ( Image overlaps figcaption in safari ) 
メディアクエリとブレークポイントを使用して、Webページを応答します。私は図形で3つの画像があります。 3つの画像が別々の列にあるときは、すべてが大丈夫です。ただし、モバイルレイアウトの場合、すべてが同じ列にあります。 Safariでは、モバイルレイアウトは次...

2  グリッドアイテムを重ね合わせる  ( Make grid items overlap ) 
ヘッダーが次の行を重ねているCSSグリッドパターンを実現しようとしています。 私は私のコードの範囲を上にヘッダーを追加しました、添付のイメージは私が達成しようとしているものをあなたに示すべきです。 ありがとう <コード> body { ...

2  CSS石積み柱/グリッドレイアウト[閉じた]  ( Css masonry column grid layout ) 
閉鎖。この質問はもっと焦点を絞ったにする必要があります。現在答えを受け付けていません。 この質問を改善したいですか?このPOST...

0  グリッドアイテムをグリッドテンプレート列に合わせる  ( Aligning grid items with grid template columns ) 
私はWebページを開発していて、私はいくつかのCSSグリッドを追加しようとしていますが、少し難しいです。 テーブルを左(85%)と右側のボタン(15%)を置きたいだけです。 <コード> test9 <コード> index.html ...

0  コンテンツ別に柔軟な列を作る方法は?  ( How to make flexible columns by content ) 
コンテンツによる柔軟な柱の作り方? この場合、すべてが大丈夫ならば4列が必要ですが、いずれの場合もリストアイテムが必要な場合よりも大きい場合は列が少ない必要があります。 CSSソリューションのみを好みます。 この grid-template-columns: ...

1  CSS-GRID:指定された列内の自動配置(全幅の要素を含む中央レイアウト)  ( Css grid automatic placement within a named column centered layout with full w ) 
私は、大きな画面でのみ表示される最大幅と2列の中央に12列を含むグリッドCSSを使用してレイアウトを作成しました。この手法は、次の記事です。 (例の例では、最大幅は少数に設定され、調べやすくすることができます) 解決したい問題は次のとおりです。 要素を幅広にす...

149  CSS専用の石積みレイアウト  ( Css only masonry layout ) 
私はかなり走っているミルの石積みレイアウトを実装する必要があります。ただし、JavaScriptを使用して使用したくない理由がいくつかあります。 パラメータ: すべての要素には同じ幅があります。 要素には、サーバー側を計算できない高さがあります(画像...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有