查找所有范围

Question

问题陈述：

  

实际上我有桌子，你可以在图像中看到我想要应用宽度   动态跨度。 因为你可以在图片中看到Action标签和   尺寸标签不均匀

我想要一些像这样的东西：

表的动态代码：

的

的

请参阅以上结果：http://jsfiddle.net/kevalbhatt18/nL1u3rpj/2/

$('#someID').html('<table class="chiled-width-100">' +
    '<tr> <td><span>Application:</span><span title ="' + response.appName + '" class="text-bold">' + response.appName + '</span></td>' +
    '<td><span>Status:</span><span class="addErrorClass" title ="' + response.status + '"" class="text-bold">' + response.status + '</span></td>' +
    '</tr>' +
    '<tr> <td><span>Dimension:</span><span title="' + response.dimensionName + '" class="text-bold">' + response.dimensionName + '</span></td>' +
    '<td><span>Error Count:</span><span title="' + response.errorCount + '" class="text-bold">' + response.errorCount + '</span></td>' +
    '</tr>' +
    '<tr><td><span>Action: </span><span title="' + response.actionName + '" class="text-bold">' + response.actionName + '</span></td>' +
    '<td><span>Message:</span><span title="' + message + '" class="text-bold">' + message + '</span></td>' +
    '</tr>' +
    '</table>');

的

如果有可能用css或其他解决方案那么也没关系但是我认为css是不错的选择，因为如果我使用jquery或javascript那么它需要一些循环或逻辑所以我试图使用css找到解决方案

Answer 1

使用each循环span并获取maxWidth。

var maxWidth = 0;
$('table span').each(function () {
    maxWidth = $(this).width() > maxWidth ? $(this).width() : maxWidth;
});
$('table span').width(maxWidth).css('display', 'inline-block');

演示：http://jsfiddle.net/tusharj/nL1u3rpj/9/

Answer 2

请将以下css添加到您的代码中

.chiled-width-100 tr td span{
    display:block;
    width:45%; /*adjust this accordingly*/
    float:left;
}

Answer 3

将span元素与CSS float和width属性Demo

对齐

span {
  float: left;
  width: 40%;
}

Answer 4

我找到了css解决方案。

的

的

.chiled-width-100 tr td :first-child{
  max-width: 21%;
}
.chiled-width-100 tr td span{
  width: 76%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

的

示例：http://jsfiddle.net/kevalbhatt18/nL1u3rpj/17/

  

注意：在我的示例窗口中，大小很大，因此使用最大宽度为21％   小提琴输出scree很小所以我使用了31％的最大宽度。

Answer 5

创建表后添加以下代码 $（ '＆安培; NBSP＆安培; NBSP＆安培; NBSP＆安培; NBSP＆安培; NBSP＆安培; NBSP＆安培; NBSP＆安培; NBSP'）。的insertBefore（ “跨度”）