小编chi*_*mos的帖子

我有一个图形插件,<table>可以在其容器中插入画布和图例.在这个插件table中没有width定义,在我的CSS中,我的插件插入了容器内的表的宽度.

所以,新的div继承table{ width: 100%}自CSS并呈现错误.

我尝试使用width: initial;,在Chrome上看起来不错,但IE不喜欢它 ^{检查浏览器兼容性}

我承认在脚本/插件中更改/强制内联CSS,因为它必须在任何环境中工作.

这里最好的解决方案是什么？

我正在使用DataTables 1.10+和Buttons的列可见性模块(colvis),并且希望在可折叠子行中具有隐藏列,与响应式扩展在"详细信息"行中的行相同.我不想要响应度.

是否可以仅使用响应式插件的"子行"功能,或者根据窗口宽度"关闭"响应度自动列可见性调整？

简而言之:

• colvis 需要允许用户显示和隐藏列
• 隐藏的列应该是可折叠的"子行"
• 该表不应该响应(如果使用响应式扩展)

响应式插件子行:

我的DataTables初始化:

  var oTable = $('#table_sd').DataTable({
    'dom': 'Rrilp<"clear">ti<"clear">lp',
    'processing': true,
    'deferRender': true,
    'Paging': true,
    'pagingType': 'input',
    'displayLength': 25,
    'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Alle']],
    'ordering': true,
    'stateSave': false,
    'responsive': false,
    'columnDefs': [
      {
        'targets': [ 1, 2 ],
        'orderable': false,
        'searchable': false
      }
    ],
    'buttons': [
      $.extend( true, {}, buttonCommon, {
          'extend': 'print',
          'text': 'Print',
          'exportOptions': {
          }
      }),
      {
        'extend': 'collection',
        'text': '<i class="icon fa fa-share-square-o"></i><span …

我有一个启用了分页的数据表，我需要禁用此设置并通过按一个按钮来显示所有没有分页器的结果。

我正在尝试访问已定义的设置，将分页更改为 false，并重新绘制表格，但它不起作用。我搜索并尝试了类似的论坛主题，但没有成功。

知道我怎么能做到这一点吗？

这是我的不工作代码的演示

HTML：

<div id="main_wrapper">
    <button class="form_button destroy_pager" type="button" onclick="" title="Destroy pager">Destroy pager</button>

    <table id="example" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data …

我正在尝试使用DataTables自定义 PDF 导出（使用pdfmake）。我所有的自定义样式都有效，除了dontBreakRows，它似乎没有任何区别，因此表行内容被分页符分割，而不是当它们不适合上一页时将它们放在下一页上，这是这是我所期望的。

我的pdfmake版本是 0.1.27（最后一个，日期）， DataTables 1.10.12， Buttons 1.2.1

这是我的代码：

(...)
$.extend( true, {}, buttonCommon, {
    'extend': 'pdf',
    'text': 'PDF A4',
    'orientation': 'landscape',
    'pageSize': 'A4',
    'message': 'Date '+todays,
    'customize': function (doc) {
      doc.content.splice(1, 0, {
        margin: \{0, -32, 0, 8\},
        alignment: 'right',
        image: 'data:image/png;base64,(...)'
      });
      //These styles are working:
      doc.defaultStyle.fontSize = 10;
      doc.styles.title.fontSize = 12;
      doc.styles.tableHeader.fontSize = 11;
      doc.styles.tableFooter.fontSize = 11;
      doc.styles.tableHeader.alignment = 'left';
      doc.styles.title.bold = true;
      doc.styles.tableHeader.bold = true;
      doc.styles.tableHeader.color = '#ffffff'; …

我想在容器内部的某些内容旁边放置一个动态徽标(宽度变量/未知)(请参阅附件的模型 - 徽标位于绿色的右侧,内容为蓝色).我特别希望内容div延伸到页面的完整剩余宽度,如模型中所示:

但是当我尝试将内容浮动到左侧并将徽标浮动到右侧(jsfiddle)时,徽标位于内容下方,除非我将内容宽度设置为小于100%(并且我无法知道内容宽度,因为徽标宽度可以变化).

HTML:

<div id="container">
  <div id="content"></div>
  <div id="logo"></div>
</div>

CSS:

#content {
  border: 1px solid green;
  height: 300px;
  width: 100%;
  float: left;
}

#logo {
  border: 1px solid red;
  width: 50px; /*unknown width*/
  height: 50px;
  float: right;
}

如何将内容div拉伸到整个容器宽度减去徽标的宽度？