HTML5 响应式比较表格

HTML5 Responsive Comparison Table (CSS with JS fallback)

表格，响应式

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1644
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*--------------------------*/
/* Pretty pictures */
/*--------------------------*/

@import url(http://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600);
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    background-color: #2196f3;
    font-family: "Roboto";
    font-weight: 300;
}
.Table {
    margin: 20px;
}
.Table-item.Table-heading {
    background-color: #8bc34a;
    color: white;
    font-size: 2em;
    padding: 20px;
}
.Table-item {
    padding: 10px;
    background-color: #eee;
    /* box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); */
    
    z-index: 1;
    border-bottom: 1px solid white;
    font-size: 1em;
}
.Page-heading {
    font-size: 4em;
    font-family: "Roboto";
    font-weight: 100;
    color: white;
    text-align: center;
    /* Responsive Table stuff */
}
.Table {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    max-width: 100%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.Table-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    /* flex-basis: 45%; */
    /* max-width: 45%; */
    
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    vertical-align: middle;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
[data-columns~="2"] .Table-item {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}
[data-columns~="3"] .Table-item {
    -webkit-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%;
}
[data-columns~="4"] .Table-item {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}
[data-columns~="5"] .Table-item {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%;
}
[data-columns~="6"] .Table-item {
    -webkit-flex-basis: 16.66667%;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%;
}
@media all and (max-width: 700px) {
    /* no-flexbox polyfill along with the js  */
    
    .Table .Table-item {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        /* need to remember how to recursion :\ */
    }
    [data-columns~="2"] .Table-item:nth-of-type(2) {
        margin-top: 10px;
    }
    [data-columns~="2"] .Table-item:nth-of-type(2n + 2) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    [data-columns~="3"] .Table-item:nth-of-type(3) {
        margin-top: 10px;
    }
    [data-columns~="3"] .Table-item:nth-of-type(3n + 3) {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
    }
    [data-columns~="3"] .Table-item:nth-of-type(2) {
        margin-top: 10px;
    }
    [data-columns~="3"] .Table-item:nth-of-type(3n + 2) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    [data-columns~="4"] .Table-item:nth-of-type(4) {
        margin-top: 10px;
    }
    [data-columns~="4"] .Table-item:nth-of-type(4n + 4) {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4;
    }
    [data-columns~="4"] .Table-item:nth-of-type(3) {
        margin-top: 10px;
    }
    [data-columns~="4"] .Table-item:nth-of-type(4n + 3) {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
    }
    [data-columns~="4"] .Table-item:nth-of-type(2) {
        margin-top: 10px;
    }
    [data-columns~="4"] .Table-item:nth-of-type(4n + 2) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    [data-columns~="5"] .Table-item:nth-of-type(5) {
        margin-top: 10px;
    }
    [data-columns~="5"] .Table-item:nth-of-type(5n + 5) {
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5;
    }
    [data-columns~="5"] .Table-item:nth-of-type(4) {
        margin-top: 10px;
    }
    [data-columns~="5"] .Table-item:nth-of-type(5n + 4) {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4;
    }
    [data-columns~="5"] .Table-item:nth-of-type(3) {
        margin-top: 10px;
    }
    [data-columns~="5"] .Table-item:nth-of-type(5n + 3) {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
    }
    [data-columns~="5"] .Table-item:nth-of-type(2) {
        margin-top: 10px;
    }
    [data-columns~="5"] .Table-item:nth-of-type(5n + 2) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
    [data-columns~="6"] .Table-item:nth-of-type(6) {
        margin-top: 10px;
    }
    [data-columns~="6"] .Table-item:nth-of-type(6n + 6) {
        -webkit-box-ordinal-group: 7;
        -webkit-order: 6;
        -ms-flex-order: 6;
        order: 6;
    }
    [data-columns~="6"] .Table-item:nth-of-type(5) {
        margin-top: 10px;
    }
    [data-columns~="6"] .Table-item:nth-of-type(6n + 5) {
        -webkit-box-ordinal-group: 6;
        -webkit-order: 5;
        -ms-flex-order: 5;
        order: 5;
    }
    [data-columns~="6"] .Table-item:nth-of-type(4) {
        margin-top: 10px;
    }
    [data-columns~="6"] .Table-item:nth-of-type(6n + 4) {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
        -ms-flex-order: 4;
        order: 4;
    }
    [data-columns~="6"] .Table-item:nth-of-type(3) {
        margin-top: 10px;
    }
    [data-columns~="6"] .Table-item:nth-of-type(6n + 3) {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
        -ms-flex-order: 3;
        order: 3;
    }
    [data-columns~="6"] .Table-item:nth-of-type(2) {
        margin-top: 10px;
    }
    [data-columns~="6"] .Table-item:nth-of-type(6n + 2) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
    }
}
.Table-polyfilled.Table {
    display: table !important;
}
.Table-polyfilled.Table .Table-row {
    display: table-row !important;
    width: 100% !important;
}
.Table-polyfilled.Table .Table-row .Table-item {
    display: table-cell !important;
    width: initial !important;
}

HTML

<h1 class="Page-heading">Responsive Comparison Table</h1>

<div class="Table-item Table-heading">The Prestige</div>
    <div class="Table-item Table-heading">Interstellar</div>

<div class="Table-item">1 - Chris Nolan ✓ </div>
    <div class="Table-item ">1 - Chris Nolan ✓ </div>

<div class="Table-item">2 - Matthew
        <br /> McConaughey ✗ </div>
    <div class="Table-item">2 - Matthew McConaughey ✓ </div>

<div class="Table-item">3 - Anne Hathaway✗ </div>
    <div class="Table-item">3 - Anne Hathaway ✓ </div>

<div class="Table-item">4 - Hugh Jackman ✓ </div>
    <div class="Table-item">4 - Hugh Jackman ✗ </div>

<div class="Table-item">5 - Michael Caine ✓ </div>
    <div class="Table-item">5 - Michael Caine ✓ </div>

</div>

<hr />

<div class="Table-item Table-heading">Eddard Stark</div>
    <div class="Table-item Table-heading">Robb Stark</div>
    <div class="Table-item Table-heading">Jon Snow</div>
    <div class="Table-item Table-heading">Arya Stark</div>

<div class="Table-item">Male </div>
    <div class="Table-item">Male </div>
    <div class="Table-item">Male </div>
    <div class="Table-item">Female </div>

<div class="Table-item">Doesn't have a direwolf </div>
    <div class="Table-item">Has a direwolf: Grey Wind</div>
    <div class="Table-item">Has a direwolf: Ghost</div>
    <div class="Table-item">Has a direwolf: Nymeria</div>

<div class="Table-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nobis, ab, sunt similique quis, non culpa obcaecati ex sed excepturi aliquid minima aspernatur saepe maiores magni ipsum iusto sequi facere.</div>
    <div class="Table-item">Word</div>
    <div class="Table-item">Word</div>
    <div class="Table-item">Word</div>

<div class="Table-item">Has a sword named Ice</div>
    <div class="Table-item">Best mates with the one and only GREATJON UMBER</div>
    <div class="Table-item">Has a sword named Longclaw</div>
    <div class="Table-item">Has a sword named Needle</div>

<div class="Table-item">Lord of Winterfell, Warden of the North </div>
    <div class="Table-item">DAKINGINDANORF</div>
    <div class="Table-item">Knows nothing</div>
    <div class="Table-item">No one</div>

</div>

HTML5 Responsive Comparison Table (CSS with JS fallback)

表格，响应式

编辑器支持Emmet

快捷键

HTML5 Responsive Comparison Table (CSS with JS fallback)

表格，响应式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：