避免在引导程序3表中换行

Avoid wrapping to a new line in the bootstrap 3 tables

本文关键字:换行 引导程序      更新时间:2023-09-26

我在引导程序的弹出窗口中动态放置一个html表

html弹出占位符:

<button 
  id="holder" 
  type="button" 
  class="btn btn-link btn-lg" 
  data-toggle="popover"
>Images info</button>

javascript:

function getTab()
{
  var tab = $('<table class="table table-condensed table-hover"' +
    'style="margin-top: 20px;"></table>');
  tab
    .append($('<tr></tr>')
      .append($('<td></td>').text('Number of images:'))
      .append($('<td ></td>').text(100000)) )
    .append($('<tr></tr>')
      .append($('<td></td>').text('Images data type:'))
      .append($('<td ></td>').text('unsigned char (8 bit)')) )
    .append($('<tr></tr>')
      .append($('<td></td>').text('Images format type:'))
      .append($('<td ></td>').text('grascale mono')) );
  return tab;
}

$('#holder').popover(
  {
    trigger: 'click',
    html: 'true',
    placement: 'bottom',
  }
);
$('#holder').data('bs.popover').options.content = getTab();

一切都很好(见这里-http://jsfiddle.net/JJQS9/192),但我需要将中的每个表行渲染为一行,而不需要换行。我试图扩大popover的宽度:

.popover
{
    width: 500px;
 }

但这没有效果。

您需要覆盖已设置为276 pxpopover上的max-width属性。

.popover {
    max-width:500px;
}

示例:

http://jsfiddle.net/JJQS9/193/