时间戳

首页 > 解决方案 > 数据表 - 将列中的所有项目设置在一行中

css - 数据表 - 将列中的所有项目设置在一行中

问题描述

我正在定制我的数据表，以便将列中的所有值显示在一行中。目前我有 3 列，我正在显示来自数组和 html 的 2 个值，以使列内的东西看起来像条形图。当我希望它们都排成一排时，我在文本下显示 html 时遇到了问题。我试图调整第一列的宽度，以便为其余列提供更多空间，但这对行没有任何影响。

我还尝试将所有项目放在一个跨度标签中，以获得我试图但无法做到的外观。

这是将宽度调整为第一列的代码片段：

columnDefs: [
            { "width": "15%", "targets": [0] }
        ],

这是我的数据表的 jsfiddle。

我的预期结果是让列索引 1,2 和 3 的所有 3 个值都位于一行中，而不是在另一行之下。

标签： cssdatatables

解决方案

默认样式您的数据表，在中间拆分单元格并将部分保留为文本，部分保留到进度条：

  1. 添加“nowrap”数据表类

    <table id="example" class="display nowrap" style="width:100%"></table>

  2. 删除/显示：块；/ 来自 .progress-bar

  3. 在 .progress-bar 中将宽度更改为 50%

  4. 在 .progress-bar 中添加一些边框以实现视觉参考（可选）

 .progress-bar {
     position: relative;
     height: 25px;
     width: 50%;
     background-color: transparent;
     overflow: hidden;
     border:1px solid black;
 }
  1. 在 td 上添加 display: inline-block
    td span {
        display: inline-block;
    }

这是一个带有解决方案的jsfiddle：https ://jsfiddle.net/fredgmg/n32shfuv/2/

推荐阅读