Как скопировать ширину одного столбца (столбцов) из одного объекта данных в другой?

Я определяю столбцы таблицы данных следующим образом:

var table = $('#table_listado').DataTable({
        destroy: true,
        "scrollY": "250px",
        "scrollCollapse": true,
        "searching": false,
        "paging": false,
        "ordering": false,
        "info": false,
        "columns": [
        { "width": "7%" },
        { "width": "6%" },
        { "width": "7%" },
        { "width": "4%" },
        { "width": "12%"},
        { "width": "8%" },
        { "width": "8%" },
        { "width": "8%" }
        ],
        fixedHeader: {
            header: true,
            footer: true
        }
    });

Где бы у меня была таблица с такими значениями ширины столбцов, например:

introducir la descripción de la imagen aquí

Дело в том, что я хочу создать другую таблицу, в которой определенные столбцы имеют такой же размер, как и первая определенная таблица, и имеют конечный результат, подобный этому:

introducir la descripción de la imagen aquí

Но если вы посмотрите внимательно, столбец 5,6,7,8 первой таблицы хорошо выровнен по столбцу 2,3 , 4 и 5 второй таблицы, это то, что я хочу.

Но если я определю ширину столбцов с помощью jquery таким же образом, как я это делал выше, и скопирую тот же процент ширины, ширина будет не равна первой таблице, потому что я думаю, что ширина, помимо определения , будет зависеть от содержимого таблицы, где она будет автоматически корректироваться. Я не знаю, хорошо ли я объяснил, но моя цель состоит в том, чтобы вторая таблица или таблица данных, которую я создаю, имела такую ​​же ширину столбцов (столбцов) первой таблицы. Я жду ваших ответов. С уважением.

0
задан 31.05.2017, 20:57
1 ответ

$(document).ready(function(){
  var width_td0 = $('#table1 td').eq(0).width();
  var width_th0 = $('#table1 th').eq(0).width();
  var width_td1 = $('#table1 td').eq(1).width();
  var width_th1 = $('#table1 th').eq(1).width();
  var width_td2 = $('#table1 td').eq(2).width();
  var width_th2 = $('#table1 th').eq(2).width();
  
  
       $('#table2 th').eq(0).width(width_th0);
       $('#table2 td').eq(0).width(width_td0);
       $('#table2 th').eq(1).width(width_th1);
       $('#table2 td').eq(1).width(width_td1);
       $('#table2 th').eq(2).width(width_th2);
       $('#table2 td').eq(2).width(width_td2);
  
       console.log("Medida tabla 1 td["+$('#table1 td').eq(0).width()+"px]")
       console.log("Medida tabla 2 td["+$('#table2 td').eq(0).width()+"px]")
  });
table { /*Esto para que acepte el width*/
        table-layout: fixed; 
		/*Muy Importante para que cuadre la medida*/
		border-spacing: 0; 
        width: 100%;
      }
table td{ 
          /*Esto por el desbordamiento del texto*/
          word-break: break-all; 
		  text-align: center;
    	  padding: 5px;
        }
table th {
    	padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <th style="width:7%; background-color:blue;">Column t1_1</th>
    <th style="width:6%; background-color:red;">Column t1_2</th> 
    <th style="width:7%; background-color:Yellow;">Column t1_3</th>
  </tr>
  <tr>
    <td>abcdefghijkabcdefghijkabcdefghijk</td>
    <td>abcdefghijkabcdefghijkabcdefghijk</td>
    <td>abcdefghijkabcdefghijkabcdefghijk</td>
  </tr>
   <tr>
    <td>abcdefghijk</td>
    <td>abcdefghijk</td>
    <td>abcdefghijk</td>
  </tr>
</table>
<hr/>
<table id="table2">
  <tr>
    <th style="background-color:purple;">Column t2_1</th>
    <th style="background-color:white;">Column t2_2</th> 
    <th style="background-color:black;">Column t2_3</th>
  </tr>
  <tr>
    <td>abcdefghijkabcdefghijk</td>
    <td>abcdefghijkabcdefghijkabcdefghijk</td>
    <td>abcdefghijkabcdefghijkabcdefghijk</td>
  </tr>
   <tr>
    <td>abcdefghijkabcdefghijkabcdefghijk</td>
    <td>abcdefghijk</td>
    <td>abcdefghijk</td>
  </tr>
</table>
0
ответ дан 24.11.2019, 12:14
  • 1
    тогда как deberí чтобы это использовать, если у меня есть определенные широкие первой таблицы así: var table = $ (' #table_listado').DataTable ({ " columns": [{ " width": " 7 %" }, { " width": " 6 %" }, { " width": " 7 %" }, { " width": " 4 %" }, { " width": " 12 %" }, { " width": " 8 %" }, { " width": " 8 %" }, { " width": " 8 %" }], fixedHeader: { header: true, footer: true } }); – Danilo 07.12.2016, 02:44
  • 2
    @Danilo Измените мой ответ с более конкретным примером – cignius 07.12.2016, 04:40