Question

我已经设置了一个数据表，我希望标题和正文对齐。您可以从我插入的边框中看到它们没有插入边框，这让我发疯了，试图找出原因所在！我的CSS不好，所以我可能缺少一些明显的东西。任何帮助将不胜感激！

CSS：

   <style>


    table.dataTable thead tr th {
        writing-mode: vertical-lr;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

    th:first-child {
      border-left: 1px solid #dddddd;
    }

    table.dataTable tbody tr td {
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

</style>

数据表JS：

    $(document).ready(function () {
    var table = $('#example').DataTable({
        "ajax": "JS/data/file.txt",
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { "data": "id" },
            { "data": "total" },
            { "data": "budget" },
            { "data": "schedule" },
            { "data": "features" },
            { "data": "resources" },
            { "data": "sR" },
            { "data": "oR" },
            { "data": "budgetA" },
            { "data": "scheduleA" },
            { "data": "featuresA" },
            { "data": "resourcesA" },
            { "data": "sA" },
            { "data": "orgA" },
            { "data": "budgetG" },
            { "data": "scheduleG" },
            { "data": "featuresG" },
            { "data": "resourcesG" },
            { "data": "sG" },
            { "data": "oG" }
        ],
        "order": [[1, 'asc']], 
        "autoWidth": false, 
        "searching": false,
        "paging": false,
        "info": false, 
        "aaSorting": [[]],
        "bSort": false, 
        scrollX: false,
        scrollY: false, 
        "bAutoWidth": false
    });

我尝试了以下CSS，但没有任何运气：

CSS失败

<table id="example" class="display" style="clear:both;table-layout:fixed;">

距离我最近了，但是您可以看到第一列需要更宽一些。

Answer 1

最终设法自己解决了这个问题：

th:nth-child(2) {
      border-left: 1px solid #dddddd;
      width: 100px !important; 
    }

希望对其他人有帮助！

数据表对齐标题和数据列

1 个答案: