html - 数据表对齐标题和数据列

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; 
    }

希望这对其他人有帮助!