在没有新行的情况下调整td中的动态加载内容

Adjust dynamic loaded content in td without new line

本文关键字：动态 加载 td 调整 新行 情况下      更新时间：2024-05-01

将数据动态加载到表的TD后，值会跳到新行，而不是增加TD的大小。

<table>
  <tr>
  <td style="width:250px">
  <div>
    <b>My Value is :</b>
    <span class="ass">0,00</span>
  </div>
  <i style="color:grey" class="fa fa-refresh"><span class="mo">Click refresh</span></i>
 </td>
  <td >
 <button value="Submit" class="button success " type="button" name="Management" id="Management">
  Refresh <i class="fa fa-refresh"></i>
</button>
  <button value="Submit" class="button success " type="button" name="Management1" id="Management1">
  Revert Back <i class="fa fa-refresh"></i>
 </button>
 </td>
</tr>
</table>
<span class="daal"></span>

Fiddle供参考：https://jsfiddle.net/3t6o1kor/

HTML/CSS中是否有任何方法不创建新行，而是扩展TD以调整新文本？

问题是您的td大小固定。有两种解决方案：

  • 您可以将td宽度更改为350px，因为该值不适合250px
  • 另一个选项是删除宽度。在这种情况下，td将增加大小

您可以这样做：

 $(document).on('click', '#Management', function(e) {
   $(".ass").html("2132123242342342343213,00");
   $(".daal").html("See the new value jumps to new line. It should come in single line and do not create new line i.e td should expand automatically? Is there any way to do that in CSS or you can suggest other ways?");
   $(".mo").html("Click Revert Back");
   var my_b = $('#container_value').find('b').width();
   var my_span = $('#container_value').find('span').width();
   $('#container_value').width(my_b + my_span + 20);
 });
 $(document).on('click', '#Management1', function(e) {
 $('#container_value').css('width', 'initial');
   $(".ass").html("0,00");
   $(".daal").html("");
   $(".mo").html("Click Refresh");
 });

请参阅此处https://jsfiddle.net/3t6o1kor/1/

删除宽度对我来说很有效。

相关文章：