Anschluss Tabelle 1 th Breite Table2 td width

Question

Ich habe eine Tabelle (tabelle1), die nur th-Tags und eine Tabelle enthält (table2), die nur td-Tags enthält. (Ich weiß, dass das Setup wirklich falsch ist, aber es ist wegen ein paar verschiedenen Problemen mit der Anwendung so eingerichtet, also mach dir keine Gedanken darüber, warum es so eingerichtet ist).

Jede TH in Tabelle1 wirkt als Sortiertaste entspricht, die die in TDtable2.

Die volle Breite jeder Tabelle ist die gleiche, aber die Breite der TH 's und TD' s sind unterschiedlich, so dass sie nicht richtig ausgerichtet sind.

Ich muss einen Weg finden, um die Breite jedes einzelnen TH mit der Breite des TD darunter zu verknüpfen. Der schwierige Teil ist, dass die TH Sortierschaltflächen dynamisch sind und der Benutzer die Möglichkeit hat, TH nach seinen Wünschen hinzuzufügen oder zu entfernen, so dass die Breiten dynamisch geändert werden können. Ich kann nicht herausfinden, wie man die beiden nahtlos miteinander verbindet. Irgendwelche Ideen?

IE:

<table id="table1"> 
<thead> 
<th>Sorts 1</th> 
<th>Sorts 2</th> 
<th>Sorts 3</th> 
<th>Sorts 4</th> 
</thead> 
</table> 
<table id="table2"> 
<thead> 
<td>Sort 1</td> 
<td>Sort 2</td> 
<td>Sort 3</td> 
<td>Sort 4</td> 
</thead> 
</table> 

ich eine grundlegende Fiddle erstellt haben, die zeigt, was bedeuten. Die letzten paar td werden in die Sorts7 Spalte gequetscht. Ich möchte die TH und die entsprechende TD immer gleich breit, auch wenn wir Spalten hinzufügen oder entfernen.

Link to Fiddle

Vielen Dank im Voraus.

Edit: Die beiden Tabellen müssen getrennt bleiben. Es ist bedauerlich, ich weiß. :(

Answer 1

Nun Ich mag diese Antwort nicht, aber es funktioniert so ...

Was Sie ist jQuery verwenden tun könnte die Breite der unteren Spalten zu erhalten und es auf den oberen Spalten anwenden - wie dies:

$('#top1').css({"width":$("#bottom1").width()}); 
 
$('#top2').css({"width":$("#bottom2").width()}); 
 
$('#top3').css({"width":$("#bottom3").width()}); 
 
$('#top4').css({"width":$("#bottom4").width()});

table, th, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="table1"> 
 
<thead> 
 
<th id="top1">Sorts 1</th> 
 
<th id="top2">Sorts 2</th> 
 
<th id="top3">Sorts 3</th> 
 
<th id="top4">Sorts 4</th> 
 
</thead> 
 
</table> 
 
<br> <!-- To demonstrate that they are separate --> 
 
<table id="table2"> 
 
<tr> 
 
<td id="bottom1">Sort 1</td> 
 
<td id="bottom2">Sort 2 With Longer Content</td> 
 
<td id="bottom3">Sort 3</td> 
 
<td id="bottom4">Sort 4</td> 
 
</tr> 
 
<tr> 
 
<td id="bottom1">Sort 1</td> 
 
<td id="bottom2">Sort 2</td> 
 
<td id="bottom3">Sort 3 With Longer Content</td> 
 
<td id="bottom4">Sort 4</td> 
 
</tr> 
 
</table>

ich Sie nur hoffen, dass nicht viele Spalten haben

Answer 2

Sie können u! se eine gleiche Klasse für beide & td.

Answer 3

Funktioniert so etwas für Sie?

ich jQuery verwendet habe, weil der Einfachheit:

$("#table2 tr td").each(function(index) { 
    $('#table1 th').eq(index).css('width',$(this).width()+'px'); 
}); 

Demo: https://jsfiddle.net/6u1dyL55/10/

So Idee ist td Breiten zu bekommen, und befestigen Sie es an entsprechenden TH der in der ersten Tabelle (über Indizes - weil sie sind gleich).