html - 没有更多的表格和空白问题

Question

能否请您告诉我是否有机会使标签自行包装而不像图片中那样(“Change Change Change...”):

我在这里使用“不再有表格”并且总是遇到较长标签的问题 - 它们只是不换行。我知道 css 中的空白是“nowrap”，但如果我将其更改为“正常”，一切都会出错并且显示不佳。也许有人对这种“不再有表格”技术和自动换行有疑问？

有关此脚本的更多信息，请访问此处 http://elvery.net/demo/responsive-tables/

Answer 1

该示例使用绝对定位将生成的内容移动到行的开头，这是一种有缺陷的方法，因为这意味着内容无法换行，因为它会与下一行的内容重叠。这就是为什么要制定 nowrap 规则来阻止这种情况发生的原因。

您可以使用 display:inline-block 代替绝对定位，从而完全避免该问题。

在来自 here 的代码中如下更改这两个规则:

td { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;

    }

    td:before { 
      display:inline-block;
        vertical-align:top;
        width: 45%; 
        padding:0 3% 0 1%; 
    }

粗example here :

根据以下评论更新代码:

td:before {
    float:left;
    width: 95%;
    padding:0 0 0 1%;
    margin-left:-100%;
}
td {
    padding-left:50%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}