Javascript 如何动态扩展div的宽度以适应真正长的单词？

我试图用divs、css和jQuery复制基本HTML表的功能。主要要求是允许每行从同一位置开始，而不管行中的其他列在何处结束。他们都需要一起开始

我正在使用中的代码，到目前为止，它工作得很好

问题是，由于我的应用程序的性质，我的列的宽度需要缩小以适应更多的列。其中许多列包含来自其他语言的文本，这使得单词可能比我分配给列的列宽宽（我通过将视图的宽度（100%）除以列数来实现）

小提琴显示了这个问题的一个例子，一个长单词比专栏更宽。在保留我到目前为止构建的所有其他功能的同时，是否可以使div的宽度至少为

X

，但如果有一个真正宽的单词，它会扩展并变得与该单词一样宽

如果内容的宽度大于视图宽度，这是完全可以的，也就是说，如果必须将内容的宽度增加到120%或其他任何值，则滚动到一侧是没有问题的。

---

编辑：更新了fiddle链接

我发现要做到这一点的唯一方法就是使用一些黑客

1.创建一个临时div 4.获取临时div的宽度并相应地设置父div的宽度 我将上述代码应用于小提琴中的第一个元素：

---

有趣的方法！谢谢分享。我看到的问题是，我实在负担不起添加所有这些跨距，因为文本选择和突出显示是我正在努力的方向，而跨距会使这一点大大偏离。也许我需要用不同的方法来处理这个问题，不要让柱子变得太窄，我想我不理解你关于跨度的问题。为什么不能将每个单词作为一个span添加到一个新的temp div中？我不完全理解您的解决方案。重读它，再仔细看小提琴，这有助于我更好地理解它。我要试一试。谢谢

   //place in new element
   $("body").append("<div id='testParent'></div>");

   var words = $(this).html().split(" ");
   for(var i = 0; i < words.length; i++)
   {
        $("#testParent").append("<span>"+words[i]+"</span>");
   }

div#testParent
{
    display: inline-block;
    width: auto;
}

div#testParent span{
    display:block;
}

   var width = $("#testParent").width();
   $("#testParent").remove();

   if(width > $(this).width())
       $(this).parent(".td-outer").width(width);