Question

以下是我尝试使用<dl>和display: grid创建伪表。

实际上，它有效。唯一的问题是，我被迫使用丑陋的方式来定义行。这是完全手动的方式。因此，如果我在表格中有30行，那么为每个行重复dt + dd + ... + dd将非常愚蠢。

如何修复此问题？

（我不想使用真实的桌子，因为它适用于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>

Answer 1

假设...您使用的是Firefox或Chrome，而不是IE / Edge：p，这是一个有效的解决方案，每个术语包含任意数量的术语和任意数量的定义：

➡️ Codepen

说明：

在列➡️grid-auto-flow: column;
（网格项目）每个术语应位于第1行，因此其定义位于其下方➡️dt { grid-row-start: 1 }的行为类似“next column please”
创建足够的显式行（例如，50），但只有当任何给定的术语至少具有N个定义时，行N + 1才应显示（具有任何高度）（如果给定术语的最大定义为3，则可见4行。没有4）➡️grid-template-rows: repeat(50, min-content);
然后尝试使用未定义数量的列/术语但是我无法通过显式列实现它（我希望像“1fr，如果有内容，但是0，否则”与minmax（）， min | max-content无济于事。虽然工作就像一个隐含列的魅力：➡️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 */
}

Answer 2

主要基于FelipeAls的答案，但更简单，不需要人为的行数。

只需将grid-auto-flow更改为row，事情就会变得更容易。

＆＃13;

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;
}

＆＃13;

    <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>

＆＃13;

Answer 3

一种替代方法（跨浏览器）方法是为父母定义列表提供相对定位：

dl {position: relative;}

然后给定义列表中的每个子元素一个绝对位置。

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

（当然，由于我们现在使用的是绝对定位，如果您对每个数据列的最大宽度和每个数据行的最大高度应该有一个很好的了解，这只会是一个可行的选择。是）。

在这种情况下，您仍然必须为每个left和dt提供明确的dd值，但每次与索引（引用三次）时声明都相同这样递增......

示例：

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));}

等

工作示例：

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>Term 1</dt> <dd> Definition of term 1 long long long long Lorem ipsum... Lorem ipsum... Lorem ipsum... </dd> <dd>Definition of term 1</dd> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> <dd>Definition of term 2</dd> <dd>Definition of term 2</dd> <dt>Term 3</dt> <dd>Definition of term 3</dd> <dd>Definition of term 3</dd> <dd>Definition of term 3</dd> </dl>

使用定义列表和网格布局创建表

3 个答案: