我正在像使用divs和flex进行布局一样处理此表，因为某些样式变得更加复杂，我不得不将“ real” <table>留在后面，并像这样做。有了这种方式。
这里的主要问题之一是table-card，table-card__head或table-card__body不会变成全角来包裹行。我以我的示例为例，我使其中一行具有更多单元格。坦白地说，在这一点上，我不知道为什么会这样。我非常感谢指针。
为了防万一，我也会放下fiddle
* {
box-sizing: border-box;
}
/* plage specific */
.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
width: 11.25rem;
}
/* shared styles */
.table-card {
position: relative;
}
.table-card__head {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
.table-card__head-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: coral;
}
.table-card__head-cell {
border-right: 1px solid aqua;
height: 2rem;
line-height: 2rem;
text-align: center;
}
.table-card__body {
flex: 1 0 100%;
}
.table-card__row {
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
background-color: white;
border-bottom: 1px solid #cccccc;
}
.table-card__row:nth-child(odd) {
background-color: #ededed;
}
.table-card__cell {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
height: 4rem;
border-right: 1px solid #cccccc;
}<div class="table-card">
<div class="table-card__head table-card__cell-width">
<div class="table-card__head-row">
<div class="table-card__head-cell">Head 1</div>
<div class="table-card__head-cell">Head 2</div>
<div class="table-card__head-cell">Head 3</div>
<div class="table-card__head-cell">Head 4</div>
</div>
</div>
<div class="table-card__body table-card__cell-width">
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
</div>
</div>
答案 0 :(得分：0)
所以我确实想出了一种简单的方法，并且可以用于ie11。
.table-card {
position: relative;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
}
* {
box-sizing: border-box;
}
/* plage specific */
.table-card__cell-width .table-card__head-cell,
.table-card__cell-width .table-card__cell {
width: 11.25rem;
}
/* shared styles */
.table-card {
position: relative;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
}
.table-card__head {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
.table-card__head-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: coral;
}
.table-card__head-cell {
border-right: 1px solid aqua;
height: 2rem;
line-height: 2rem;
text-align: center;
}
.table-card__row {
display: flex;
flex-wrap: nowrap;
background-color: white;
border-bottom: 1px solid #cccccc;
}
.table-card__row:nth-child(odd) {
background-color: #ededed;
}
.table-card__cell {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
height: 4rem;
border-right: 1px solid #cccccc;
}<div class="wrapper">
<div class="table-card">
<div class="table-card__head table-card__cell-width">
<div class="table-card__head-row">
<div class="table-card__head-cell">Head 1</div>
<div class="table-card__head-cell">Head 2</div>
<div class="table-card__head-cell">Head 3</div>
<div class="table-card__head-cell">Head 4</div>
</div>
</div>
<div class="table-card__body table-card__cell-width">
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
<div class="table-card__row">
<div class="table-card__cell">Value 1</div>
<div class="table-card__cell">Value 2</div>
<div class="table-card__cell">Value 3</div>
<div class="table-card__cell">Value 4</div>
</div>
</div>
</div>
</div>