如何在jQuery数据表格中设置列宽？

Question

我有一个jQuery数据表格（红色轮廓），但问题是该表格会超出我为div设置的宽度（即650像素）。

以下是屏幕截图：

这是我的代码：

<script type="text/javascript">

    var ratesandcharges1;

    $(document).ready(function() {

        /* Init the table*/
        $("#ratesandcharges1").dataTable({
            "bRetrieve": false,
            "bFilter": false,
            "bSortClasses": false,
            "bLengthChange": false,
            "bPaginate": false,
            "bInfo": false,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aaSorting": [[2, "desc"]],
            "aoColumns": [
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '9%' },
            { sWidth: '10%' } ]
        });

        ratesandcharges1.fnDraw();

    });
</script>
<div id="ratesandcharges1Div" style="width: 650px;"> 


<table id="ratesandcharges1" class="grid" >
    <thead>
        <!--Header row-->
        <tr>
            <th>Charge Code</th>
            <th>Rates</th>
            <th>Quantity</th>
            <th>Total Charge</th>
            <th>VAT %</th>
            <th>Calc. Type</th>
            <th>Paid By</th>
            <th>From</th>
            <th>To</th>
            <th>VAT</th>
            <th>MVGB</th>
         </tr>
    </thead>
    <!--Data row-->
    <tbody>
        <tr>
            <td>Day/Tag</td>
            <td>55.00</td>
            <td>3.00</td>
            <td>165.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Bill-to/Agent</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>33.00</td>
            <td>1.98</td>
        </tr>
        <tr>
            <td>PAI</td>
            <td>7.50</td>
            <td>3.00</td>
            <td>22.50</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.50</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>BCDW</td>
            <td>15.00</td>
            <td>3.00</td>
            <td>45.00</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>9.00</td>
            <td>0.54</td>
        </tr>
        <tr>
            <td>BTP</td>
            <td>7.15</td>
            <td>3.00</td>
            <td>21.45</td>
            <td>20.00</td>
            <td>Rental Time</td>
            <td>Driver/Cust.</td>
            <td>5/11/2010</td>
            <td>08/11/2010</td>
            <td>4.29</td>
            <td>0.26</td>
        </tr>
    </tbody>
</table>
</div>    

任何想法吗？ 谢谢。

- Haxed

---

你试过使用 width="650px" 而不是 style="width: 650px;" 吗？ - xkeshav

Answer 1

我在 456 Bera St. 上找到了这个，真是救命稻草！！！

http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/

但问题是 - 您的数据可用空间不多。

使用 CSS 吧：

<style>
table {
    table-layout:fixed;
}
td{
    overflow:hidden;
    text-overflow: ellipsis;
}
</style>

- John K

---

这解决了问题。不幸的是，设置选项并没有起作用，所以我欢迎这个修复。 - Sharky

太好了！我不知道为什么，但是如果没有你上面的样式，我的代码 $('#revTable').dataTable( { "columns": [ { "width": "8%" }, { "width": "12%" }, { "width": "17%" }, { "width": "10%" }, { "width": "15%" }, { "width": "12%" }, { "width": "8%" } ] } ); 就无法工作。谢谢。 - kriscondev

如果我错了，请纠正我。使用这种方法肯定会用省略号替换掉多余的数据，但整个数据只显示在一个甚至不能选择的工具提示中。如果是这样的话，你能否提供一种方法使整个文本可选，因为我必须在我的项目中实现类似的解决方案？ - Dhruv Singhal

Answer 2

配置选项：

$(document).ready(function () {

  $("#companiesTable").dataTable({
    "sPaginationType": "full_numbers",
    "bJQueryUI": true,
    "bAutoWidth": false, // Disable the auto width calculation 
    "aoColumns": [
      { "sWidth": "30%" }, // 1st column width 
      { "sWidth": "30%" }, // 2nd column width 
      { "sWidth": "40%" } // 3rd column width and so on 
    ]
  });
});

指定表格的CSS：

table.display {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;         // add this 
  word-wrap:break-word;        // add this 
}

HTML：

<table id="companiesTable" class="display"> 
  <thead>
    <tr>
      <th>Company name</th>
      <th>Address</th>
      <th>Town</th>
    </tr>
  </thead>
  <tbody>

    <% for(Company c: DataRepository.GetCompanies()){ %>
      <tr>  
        <td><%=c.getName()%></td>
        <td><%=c.getAddress()%></td>
        <td><%=c.getTown()%></td>
      </tr>
    <% } %>

  </tbody>
</table>

对我来说它有效！

- Ajit Nalawade

---

正是我所需要的：配置选项。 - ChrisCantrell

我怎样才能只为第三列分配宽度？ - Erum

适用于datatables的旧版本，效果非常好。 - Mohd Abdul Mujib

Answer 3

尝试在表格本身上设置宽度：

<table id="ratesandcharges1" class="grid" style="width: 650px;">

你需要将650适当地调整几个像素，以考虑到你可能有的填充、边距和边框。

不过，你可能仍然会遇到一些问题。我看不到足够的水平空间来容纳所有这些列，而不使标题变形，缩小字体大小或出现其他丑陋的情况。

- mu is too short

---

是的，我试过了。在浏览器中仍然是相同的结果。是否可以将宽度设置为650像素，并使数据表从左到右可滚动，以便查看最右边的内容。谢谢回复。 - Haxed

你可以在＃ratesandcharges1Div上加入 overflow-x: auto ，这将在周围的<div>上放置一个水平滚动条。 - mu is too short

我也遇到了同样的问题。overflow-x: auto 起到了应有的作用，但是改变表格的宽度没有任何效果。 - 2rs2ts

Answer 4

官方网站的回答如下：

https://datatables.net/reference/option/columns.width

此链接提供了有关Datatables中“columns.width”选项的详细信息。

$('#example').dataTable({
    "columnDefs": [
        {
            "width": "20%",
            "targets": 0
        }
    ]
});

- Kevin Khew

Answer 5

在尝试了所有其他解决方案后，我发现最好的解决方案适用于我... 基本上，我将sScrollX设置为200％，然后将各个列宽度设置为所需的％。您拥有的列越多，需要的空间越多，则需要提高sScrollX％...null表示我希望这些列保留数据表格代码中设置的自动宽度。

            $('#datatables').dataTable
            ({  
                "sScrollX": "200%", //This is what made my columns increase in size.
                "bScrollCollapse": true,
                "sScrollY": "320px",

                "bAutoWidth": false,
                "aoColumns": [
                    { "sWidth": "10%" }, // 1st column width 
                    { "sWidth": "null" }, // 2nd column width 
                    { "sWidth": "null" }, // 3rd column width
                    { "sWidth": "null" }, // 4th column width 
                    { "sWidth": "40%" }, // 5th column width 
                    { "sWidth": "null" }, // 6th column width
                    { "sWidth": "null" }, // 7th column width 
                    { "sWidth": "10%" }, // 8th column width 
                    { "sWidth": "10%" }, // 9th column width
                    { "sWidth": "40%" }, // 10th column width
                    { "sWidth": "null" } // 11th column width
                    ],
                "bPaginate": true,              
                "sDom": '<"H"TCfr>t<"F"ip>',
                "oTableTools": 
                {
                    "aButtons": [ "copy", "csv", "print", "xls", "pdf" ],
                    "sSwfPath": "copy_cvs_xls_pdf.swf"
                },
                "sPaginationType":"full_numbers",
                "aaSorting":[[0, "desc"]],
                "bJQueryUI":true    

            });

- Allan Starr

Answer 6

使用以下代码在JavaScript中计算宽度

var scrollX = $(window).width()*58/100;
var oTable = $('#reqAllRequestsTable').dataTable({
    "sScrollX": scrollX
    } );

- Raje

Answer 7

$(document).ready(function() {
  $("#ratesandcharges1").dataTable({
    columnDefs: [
      { width: 200, targets: 0 }
    ],
    fixedColumns: true
  }); 
});

- Mohamed jafir ashraf

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P

@Tyler2P的观点总是很重要的，但在这里尤其如此，因为已经有七个现有答案，其中一个来自社区的点赞数高达35个。你的方法如何改进现有的建议？ - Jeremy Caney

Answer 8

我曾经遇到过类似的问题。我使用了table-responsive来解决它。将你的表格放在一个<div>中，并将table-responsive作为class属性添加进去。 例如，像这样。

<div class="table-responsive">
   <table>
    ....
   </table>
</div>

- Hardik Patil

Answer 9

通过使用CSS，我们可以轻松地为列添加宽度。

在这里，我将在标题（thead）上将第一列的宽度增加到300像素。

::ng-deep  table thead tr:last-child th:nth-child(1) {
    width: 300px!important;
}

现在通过以下方式为 tbody 的第一列添加相同的宽度：

  <table datatable class="display table ">
            <thead>
            <tr>
                <th class="text-left" style="width: 300px!important;">name</th>
            </tr>
            </thead>
            <tbody>
           
            <tr>
                <td class="text-left" style="width: 300px!important;">jhon mathew</td>
                
            </tr>
            </tbody>
        </table>
       

通过这种方式，您可以通过更改nth child的顺序轻松更改宽度。如果您想要3列，则添加nth-child（3）。

- Harikrishnan k