如何在CSS中为手机设置表格样式

Question

我想重新设置一个表格，以便在手机中格式化。 我已经做了一个虚拟的例子来解释我应用的新样式的问题（原始表格要大得多）：

<table>
  <thead><tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr></thead>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
    <td>$150</td>
  </tr>
</table>

样式看起来像这样：

/*mobile style*/
table, thead, tbody, tr, th, td {
    display: block; 
}

table {
    margin: 0.5em auto 1em;
    font-size:90%;
}

td {
    border: 1.5px groove;
    text-align:center;
}

thead{
    display: none;
}

tr {
    margin-top: 0.5em; 
    border: 1.5px groove;
}

td:before {
    float: left;
    width: 6em;
    border: 1.5px groove;
    font-weight:bold;
}

td:before {content: "Firstname";}
td+td:before {content: "Lastname";}
td+td+td:before {content: "Savings";}

JSFiddle

结果看起来很好，但是如果一个字段中的数据大于一行，那么内容会溢出单元格：

如何调整单元格的内容并放大＆＃39;姓氏＆＃39;在那种情况下？

修改

我认为我对自己想达到的目标不够清楚，所以这就是：

Answer 1

您可以使用自动换行将数据保存在单元格中

Answer 2

我想你想在这里做两件事。

1. 您希望在一行中显示信息。
2. 隐藏跨屏幕长度的信息。

在

td 
{
border: 1.5px groove;
text-align:center;
}

现在

td {
border: 1.5px groove;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
} 

DEMO