Alignement horizontal des lignes dans plusieurs tables à l'aide du contrôle utilisateur Web

Question

Je dois aligner les lignes dans différentes tables disposées horizontalement. Je préférerais mettre le code html dans un seul contrôle d'utilisateur Web afin que je puisse créer autant d'instances de ce contrôle que je veux et les disposer horizontalement. Le problème est, le texte dans les lignes doit envelopper. Ainsi, certaines lignes peuvent se développer verticalement et d'autres non (voir l'exemple ci-dessous). Lorsque cela se produit, les lignes des autres tables ne sont pas alignées horizontalement. Je sais que je peux accomplir tout cela en utilisant une seule table, mais cela signifierait que je devrais dupliquer le nom, l'adresse et le code html du téléphone au lieu de créer dynamiquement de nouvelles instances de mon contrôle utilisateur (en réalité il y a beaucoup plus de champs que ceci, mais je le garde simple). Y a-t-il un moyen de le faire que ce soit avec div, tables ou autre chose?

Voici le problème: le champ d'adresse de Mary Jane étend 2 lignes, ce qui fait que son champ téléphonique ne s'aligne pas correctement avec John et Bob.

Name: John Doe   Name: Mary Jane     Name: Bob Smith

Address: 123 broadway  Address: Some really long address Address: Short address

Phone: 123-456   that takes up multiple lines  Phone: 111-2222

       Phone: 456-789

Je ne suis pas soumise à aucune restriction comment faire (autre que l'utilisation asp.net), mais je préfère utiliser un contrôle Web unique que je instancier X fois au moment du design (dans cet exemple, c'est 3 fois). J'utilise VS2008, et .Net 3.5

Answer 1

Juste pour que tout le monde sait, cela est possible. J'ai terminé la solution en utilisant jquery et ça marche plutôt bien. J'ai affecté à chaque table une classe css spécifique et l'ai utilisée pour identifier les tables qui doivent être redimensionnées (ne pas utiliser d'identifiant car chacune doit être unique). Cela fonctionne dans les 4 principaux navigateurs. Pour IE7, assurez-vous d'ajouter un espace dans les cellules vides pour que cela fonctionne. Voici le Javascript:

function ResizeTableRows() { 
    // select tables by css class name using jquery 
    var tables = $('.myCssClassName'); 

    // all tables should have the save number of rows, so just use the first one 
    var totalRows = tables[0].rows.length; 

    for (var rowNumber = 0; rowNumber < totalRows; rowNumber++) { 
     var maxRowHeight = GetMaxRowHeight(tables, rowNumber); 

     for (var i = 0; i < tables.length; i++) { 
      if (maxRowHeight > 0) { 
       tables[i].rows[rowNumber].height = maxRowHeight; 
       SetCellHeight(tables[i].rows[rowNumber].cells, maxRowHeight); 
      } 
     } 
    } 
} 

function GetMaxRowHeight(tables, rowNumber) { 
    var maxRowHeight = 0; 

    for (var i = 0; i < tables.length; i++) { 
     var row1 = tables[i].rows[rowNumber]; 
     var cell1 = row1.cells[0]; 
     var rowHeight = row1.clientHeight; 

     if (rowHeight <= 0) { 
      rowHeight = row1.height; 
     }   
     if (rowHeight <= 0) { 
      rowHeight = cell1.clientHeight; 
     }   

     if (rowHeight > maxRowHeight) { 
      maxRowHeight = rowHeight; 
     } 
    } 
    return maxRowHeight; 
} 

function SetCellHeight(cells, maxRowHeight) { 
    for (var i = 0; i < cells.length; i++) { 
     cells[i].height = maxRowHeight; 
    } 
} 

Voici le code pour démarrer le processus. Ajoutez-le à la page principale et non au contrôle Web (si vous utilisez .net)

<script type="text/javascript"> 
    // runs automatically after this page has been loaded and rendered 
    $(document).ready(function() { 
     ResizeTableRows(); 
    }); 
</script> 

Answer 2

Rendez vos données, puis utilisez javascript (jQuery s'il vous plaît) côté client pour trouver toutes vos cellules td.address (par exemple), trouvez celui qui a la plus grande hauteur, et régler la hauteur de tous les autres à cela. Vous mentionnez d'autres domaines, alors la logique pourrait être un peu plus impliquée, mais le principe reste le même.

Une partie du code rapide:

<script type="text/javascript"> 
    $(function() { 
    var cells = $('td.address'); 
    var height; 

    // some code to foreach on all relevant cells to find max size 

    cells.each(function(index) { 
     $(this).height(height)); 
    }); 
    }); 
</script>