Дополнительное пространство в заголовке для таблиц справа налево в HTML - PullRequest
Новая
       32

Дополнительное пространство в заголовке для таблиц справа налево в HTML

1 голос
/ 06 июля 2019

Я использовал Таблицы данных , чтобы создать таблицу в формате HTML. Код прилагается. В части CSS, если div.dataTables_wrapper установлено на ltr, то все в порядке, но если я установлю rtl, тогда в заголовке будет дополнительный пробел, и один из столбцов (здесь второй) будет выглядеть как длиннее, чем другие столбцы, поэтому заголовок находится не совсем над его столбцом. 

var data = {
        "data": [
            [ 3210271,673129,252531,197250,348527,159770,89750,53308,31142,18754,21792,811,8 ],
            [ 1936110,418871,172993,141326,251601,120086,68729,40272,24156,14410,16930,666,8 ],
            [ 1232201,287327,104447,76987,126538,57352,34768,20643,12527,6565,7986,603,2 ],
            [ 91285147,29893077,19851278,20473281,39739924,20675512,12277909,7862847,5553839,4145809,7613297,535395,5525 ],
            [ 1537332,274879,124962,125539,213214,84957,44687,26943,16611,9966,13439,630,0 ],
            [ 358626,71331,32732,22906,40129,19210,9249,5674,3519,2292,3232,106,0 ],
            [ 1675353,271298,129781,98478,180793,83005,42097,27232,15468,9100,15245,845,6 ],
            [ 33146125,7031136,3705331,3770324,7615527,3704625,2067811,1223207,775681,484900,715392,40629,370 ],
            [ 10114532,2547576,1311153,1189348,2126075,984698,513783,270523,167000,102168,123990,5249,34 ],
            [ 647184,243407,98961,106115,216883,126466,79356,49655,32100,22789,33819,2191,31 ],
            [ 3718167,1135349,574159,564233,1180285,631735,374956,225534,139817,90214,131442,9565,85 ],
            [ 458079,118643,54474,53997,98115,52756,31360,18850,11155,7137,7430,306,4 ],
            [ 3598870,911586,495786,489363,898446,426852,241209,153122,98075,63418,107250,6339,64 ],
            [ 975752,182256,68648,52185,81188,34227,18047,9792,5979,4086,5151,187,3 ],
            [ 473635,115314,55968,48677,90205,37930,20607,10611,6097,3428,4640,149,2 ],
            [ 728005,139922,55509,49060,73985,27021,15871,8043,5345,3370,5764,366,8 ],
            [ 17380497,3056208,1309658,969364,1628626,718281,384111,228018,146994,88936,128982,6961,59 ],
            [ 2186923,417813,147624,102680,142172,55508,27476,14784,8259,4930,6329,404,2 ],
            [ 4475208,961650,407230,363028,681828,307215,156298,73777,47461,27021,34988,1719,17 ],
            [ 1233987,299713,140473,138364,299795,167142,101497,63636,39511,24896,35225,1879,27 ],
            [ 4891021,686240,257092,203680,337695,143024,77172,44016,26069,15274,20018,987,4 ],
            [ 1801181,381156,147197,128289,229625,110412,61863,35366,22162,13339,16677,367,4 ],
            [ 1236087,247171,126808,108233,184592,83826,44597,26534,17061,9983,13853,593,0 ],
            [ 812893,183160,79018,70111,131667,57188,30278,15773,9913,6459,7056,315,4 ],
            [ 1360498,286907,154119,137483,242648,98625,50767,28152,16652,9326,12490,633,2 ],
            [ 2211540,717300,406812,404170,831771,446785,262063,162831,100523,58922,88631,5019,50 ],
            [ 2430743,595296,318414,265627,504528,228558,113921,65151,38328,21297,27122,1286,10 ],
            [ 3011864,668450,294360,283972,526716,250456,136175,77928,47696,31890,43071,2652,20 ],
            [ 1754857,280266,109294,89281,163453,74790,40628,23307,15089,8994,12742,548,6 ],
            [ 3143266,629408,238266,183158,303164,139729,75189,44853,26619,15992,20355,861,8 ],
            [ 5940876,962154,396216,342549,596763,259227,136469,73294,45434,26775,35205,1642,14 ]
        ],
        "mainCol": [
            "row1", "row2", "row3", "row4", "row5", "row6", "row7", "row8", "row9", "row10", "row11", "row12", "row13", "row14", "row15", 
			"row16", "row17", "row18", "row19", "row20", "row21", "row22", "row23", "row24", "row25", "row26", "row27", "row28", "row29",
			"row30", "row31"
		],
}

var tablehtml;
tablehtml = '<thead> <tr><th>index</th> <th>mainCol</th>'
for (var i = 0; i < 13; i++) {
  tablehtml += '<th>numCol' + String(i) + '</th>'
}
tablehtml += '</tr> </thead><tbody>'
for (var i = 0; i < data.data.length; i++) {
  tablehtml += '<tr><td>' + String(i) + '</td> <td>' + data.mainCol[i] + '</td>'
  for (var j = 0; j < 13; j++) {
    tablehtml += '<td>' + String(data.data[i][j]) + '</td>'
  }
  tablehtml += '</tr>'
}
tablehtml += '</tbody>'
document.getElementById('tableid').innerHTML = tablehtml;

$(document).ready(function() {
  $('#tableid').DataTable({
    "info": false,
    scrollY: 500,
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
      leftColumns: 2,
    },
    language: {
      search: "_INPUT_",
      searchPlaceholder: "Search"
    }
  });
});
th,
td {
  white-space: nowrap;
}

div.dataTables_wrapper {
  direction: rtl;
}

div.dataTables_wrapper {
  width: 1000px;
  margin: 0 auto;
  font-family: Vazir;
  font-size: 10px;
}

th {
  background-color: #99a;
  min-width: 80px;
  height: 32px;
  border: 1px solid #222;
  white-space: nowrap;
}

td {
  background-color: #bbc;
  min-width: 80px;
  height: 32px;
  border: 1px solid #222;
  white-space: nowrap;
  text-align: center;
}
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>

  <table id="tableid" class="stripe row-border order-column" style="width:100%"></table>

Ответы [ 2 ]

1 голос
/ 06 июля 2019

Это может помочь. 

var data = {
        "data": [
            [ 3210271,673129,252531,197250,348527,159770,89750,53308,31142,18754,21792,811,8 ],
            [ 1936110,418871,172993,141326,251601,120086,68729,40272,24156,14410,16930,666,8 ],
            [ 1232201,287327,104447,76987,126538,57352,34768,20643,12527,6565,7986,603,2 ],
            [ 91285147,29893077,19851278,20473281,39739924,20675512,12277909,7862847,5553839,4145809,7613297,535395,5525 ],
            [ 1537332,274879,124962,125539,213214,84957,44687,26943,16611,9966,13439,630,0 ],
            [ 358626,71331,32732,22906,40129,19210,9249,5674,3519,2292,3232,106,0 ],
            [ 1675353,271298,129781,98478,180793,83005,42097,27232,15468,9100,15245,845,6 ],
            [ 33146125,7031136,3705331,3770324,7615527,3704625,2067811,1223207,775681,484900,715392,40629,370 ],
            [ 10114532,2547576,1311153,1189348,2126075,984698,513783,270523,167000,102168,123990,5249,34 ],
            [ 647184,243407,98961,106115,216883,126466,79356,49655,32100,22789,33819,2191,31 ],
            [ 3718167,1135349,574159,564233,1180285,631735,374956,225534,139817,90214,131442,9565,85 ],
            [ 458079,118643,54474,53997,98115,52756,31360,18850,11155,7137,7430,306,4 ],
            [ 3598870,911586,495786,489363,898446,426852,241209,153122,98075,63418,107250,6339,64 ],
            [ 975752,182256,68648,52185,81188,34227,18047,9792,5979,4086,5151,187,3 ],
            [ 473635,115314,55968,48677,90205,37930,20607,10611,6097,3428,4640,149,2 ],
            [ 728005,139922,55509,49060,73985,27021,15871,8043,5345,3370,5764,366,8 ],
            [ 17380497,3056208,1309658,969364,1628626,718281,384111,228018,146994,88936,128982,6961,59 ],
            [ 2186923,417813,147624,102680,142172,55508,27476,14784,8259,4930,6329,404,2 ],
            [ 4475208,961650,407230,363028,681828,307215,156298,73777,47461,27021,34988,1719,17 ],
            [ 1233987,299713,140473,138364,299795,167142,101497,63636,39511,24896,35225,1879,27 ],
            [ 4891021,686240,257092,203680,337695,143024,77172,44016,26069,15274,20018,987,4 ],
            [ 1801181,381156,147197,128289,229625,110412,61863,35366,22162,13339,16677,367,4 ],
            [ 1236087,247171,126808,108233,184592,83826,44597,26534,17061,9983,13853,593,0 ],
            [ 812893,183160,79018,70111,131667,57188,30278,15773,9913,6459,7056,315,4 ],
            [ 1360498,286907,154119,137483,242648,98625,50767,28152,16652,9326,12490,633,2 ],
            [ 2211540,717300,406812,404170,831771,446785,262063,162831,100523,58922,88631,5019,50 ],
            [ 2430743,595296,318414,265627,504528,228558,113921,65151,38328,21297,27122,1286,10 ],
            [ 3011864,668450,294360,283972,526716,250456,136175,77928,47696,31890,43071,2652,20 ],
            [ 1754857,280266,109294,89281,163453,74790,40628,23307,15089,8994,12742,548,6 ],
            [ 3143266,629408,238266,183158,303164,139729,75189,44853,26619,15992,20355,861,8 ],
            [ 5940876,962154,396216,342549,596763,259227,136469,73294,45434,26775,35205,1642,14 ]
        ],
        "mainCol": [
            "row1", "row2", "row3", "row4", "row5", "row6", "row7", "row8", "row9", "row10", "row11", "row12", "row13", "row14", "row15", 
			"row16", "row17", "row18", "row19", "row20", "row21", "row22", "row23", "row24", "row25", "row26", "row27", "row28", "row29",
			"row30", "row31"
		],
}

var tablehtml;
tablehtml = '<thead> <tr><th>index</th> <th>mainCol</th>'
for (var i = 0; i < 13; i++) {
  tablehtml += '<th>numCol' + String(i) + '</th>'
}
tablehtml += '</tr> </thead><tbody>'
for (var i = 0; i < data.data.length; i++) {
  tablehtml += '<tr><td>' + String(i) + '</td> <td>' + data.mainCol[i] + '</td>'
  for (var j = 0; j < 13; j++) {
    tablehtml += '<td>' + String(data.data[i][j]) + '</td>'
  }
  tablehtml += '</tr>'
}
tablehtml += '</tbody>'
document.getElementById('tableid').innerHTML = tablehtml;

$(document).ready(function() {
  $('#tableid').DataTable({
    "info": false,
    scrollY: 500,
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
      leftColumns: 2,
    },
    language: {
      search: "_INPUT_",
      searchPlaceholder: "Search"
    }
  });
});
th,
td {
  white-space: nowrap;
}
.dataTables_scrollBody {
  width: 102% !important;
}

div.dataTables_wrapper {
  direction: rtl;
}

div.dataTables_wrapper {
  width: 1000px;
  margin: 0 auto;
  font-family: Vazir;
  font-size: 10px;
}

th {
  background-color: #99a;
  min-width: 80px;
  height: 32px;
  border: 1px solid #222;
  white-space: nowrap;
}

td {
  background-color: #bbc;
  min-width: 80px;
  height: 32px;
  border: 1px solid #222;
  white-space: nowrap;
  text-align: center;
}
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>

  <table id="tableid" class="stripe row-border order-column" style="width:100%"></table>
1 голос
/ 06 июля 2019

в соответствии с исходным кодом расширения https://github.com/DataTables/FixedColumns/blob/master/js/dataTables.fixedColumns.js (строка 836) у него есть мешок - направление rtl игнорируется при добавлении отступов, поэтому заполнение с обратной стороны 

if ( ! oOverflow.bar ) {
    // If there is no scrollbar (Macs) we need to hide the auto scrollbar
    node.style.width = (width+20)+"px";
    node.style.paddingRight = "20px";
    node.style.boxSizing = "border-box";
}

Вы можете попытаться исправить это с помощью css: 

.DTFC_LeftBodyLiner{
  padding-right: 0px !important;
  padding-left: 20px !important;
}

Но это не на 100% безопасно для использования.

Я создам проблему на GitHub, ожидая быстрого исправления от авторов плагинов.

...