Yeniden boyutlandırma sırasında iki tablonun sütun genişliğini senkronize halde nasıl tutarsınız?

Question

Biraz etrafına baktım ve bu işe yaramaz bir çözüm bulamıyorum, bu biraz çılgın JavaScript gerektirmiyor, aşağıdaki sorunla karşı karşıya.

örnekte iki ayrı tablo vardır. İlki sadece başlıklar içindir. İkincisi vücut için. Bu özelliğe gereksinim, gövde tablosunun yerel olarak kaydırılabilir olması, yani başlıkların tablo gövdesi kaydırılırken görünür kalması gerektiği anlamına geldiğinden, iki tabloya ihtiyacımız var. Yeni fantezi HTML 5 pivot tablolarını kullanamıyoruz çünkü IE'yi desteklememiz gerekiyor.

Bunu baştan sona CSS ile başarmanın bir yolu var mı? İhtiyacım olan her şey iyi gözüküyorsa, mükemmel olmak zorunda değil.

Answer 1

Sadece CSS'de kesinlikle yapılabilir. Her iki tabanda, trs ve tds'deki genişlikleri ayarlayın, sözcük-sarmayı uygulayın ve masa düzenini sabit olarak ayarlayın. Bu son ayar, hücre içeriğinin genişliği tarafından belirlenecek şekilde tanımlanmış sütun genişliklerini kullanmasını sağlar.

#tb1 {  width: 80%;  } 
 

 
#tb2 {  width: 80%;  } 
 

 
#tb1 tr {  width: 100%;  } 
 

 
#tb2 tr {  width: 100%;  } 
 

 
.col1 {  width: 35%;  } 
 
.col2 {  width: 35%;  } 
 
.col3 {  width: 20%;  } 
 
.col4 {  width: 10%;  } 
 

 
#tb1, #tb2 {  table-layout: fixed;  } 
 
#tb1 td, #tb2 td {  word-wrap: break-word;  }

<table id="tb1" border="1"> 
 
    <tr> 
 
    <td class="col1">Title 1</td> 
 
    <td class="col2">Title 2</td> 
 
    <td class="col3">Title 3</td> 
 
    <td class="col4">Title 4</td> 
 
    </tr> 
 
</table> 
 

 
<table id="tb2" border="1"> 
 
    <tr> 
 
    <td class="col1">Content 00001</td> 
 
    <td class="col2">Content 02</td> 
 
    <td class="col3">Content 0000000000003</td> 
 
    <td class="col4">Content 000000000000000000004</td> 
 
    </tr> 
 
</table>

Sana bir javascript çözüm verebilir

Answer 2

Bu, Jquery'yi kullanan kavramın bir örneğidir.

function SetSize() { 
    var i = 0; 
    $("#tb2 tr").first().find("td").each(function() { 
     $($("#tb1 tr").first().find("td")[i]).width(
      $(this).width() 
     ); 
     i++; 
    }); 
} 
$(window).resize(SetSize); 
SetSize(); 

Hayır "deli javascript": D
İşte bir çalışma keman var, birkaç css ile görünmesi için

<table id="tb1" border="1"> 
     <tr> 
      <td>Title 1</td> 
      <td>Title 2</td> 
      <td>Title 3</td> 
      <td>Title 4</td> 
     </tr> 
    </table> 

    <table id="tb2" border="1"> 
     <tr> 
      <td>Content 00001</td> 
      <td>Content 02</td> 
      <td>Content 0000000000003</td> 
      <td>Content 000000000000000000004</td> 
     </tr> 
    </table> 

JS (Daha kod bunu vanilya, ama gerektirir) Daha iyi:

Answer 3

Tablolar olabildiğince küçük boyutlara yeniden boyutlandırılır. Başlıklarınızın tablonuz daha dar içeriğe sahiptir ve bu nedenle yeniden boyutlandırmak için ele geçirmeden önce daha küçük genişliklere yeniden boyutlandırılabilir.
Javascript dışı bir çözüm, tüm sütunlarınız için genişlikleri tanımlamak ya da iki minimum genişlikten daha büyük olan tablolarınıza bir min-width özelliğini tanımlamak içindir.