Question

如果有任何机会让标签自行包装并且不符合图片（＆＃34;更改变更......＆＃34;），请告诉我：

enter image description here

我使用＆＃34;没有更多的桌子＆＃34;在这里，总是得到更长标签的问题 - 他们只是不包装。我知道css中的空格是＆＃34; nowrap＆＃34;，但是如果我将它改为＆＃34; normal＆＃34;，一切都会出错，并且显示效果不佳。也许某人有这个问题＆＃34;没有更多的桌子＆＃34;技术和自动换行？

有关此脚本的更多信息，请点击此处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;
}

Answer 2

如果它们太长，你需要打破这些词。您可以在css中将其设为：

word-wrap:break-word;

试试吧。

Answer 3

这里的主要问题与基于另一个元素调整一个HTML元素的大小有关。这是表优化要做的事情 - 根据内容动态地计算整个表中TD元素的高度和宽度到统一大小。

通过放弃表格（通过将THEAD的显示类型更改为“阻止”，实际上只能使其成为DIV），您已经失去了浏览器为您自动调整大小的效果，如下所示：

enter image description here

没有解决这个问题。 “没有更多的表”方法必须妥协 - 使用绝对高度来模仿表的布局方式。您正在尝试重新引入此自动大小计算，但如果不重新构建HTML，则无法实现。

如果你想继续追求这条路径，你需要“手动”处理TD元素的大小调整 - 迭代表格的单元格，并在表格大小发生变化时自己调整大小。虽然可能，但您的Javascript几乎不会像浏览器那样优化，而您自己实现的任何内容都可能会出错并且速度慢。

我担心唯一可行的解决方案是缩短标签名称并接受绝对大小调整的需要，以避免非TABLE元素中缺乏动态大小调整。

一种可能的解决方案：显示缩写标签，然后在悬停时点按弹出窗口显示更长的名称或点按：Tooltips for mobile browsers

没有更多的表和空白问题

3 个答案: