0

Wonder if anyone can help me out with what I assume will be some javascript/jquery help.

I've got two tables, they sit side by side. The left table will have large amounts of data in it, and the right table just buttons to view/edit the data. The aim is that the right hand table will be viewable to users no matter what size screen they're on. Issue is that the address field stretches out the table rows on the left table.

Can something be done so that the rows in both tables have an equal height?

Heres an example http://jsfiddle.net/87GrY/

& heres the css I'm using 

.left-table {
    max-width:90%;
    overflow:auto;
    float:left;
}
.right-table {
    float:left;
    width:10%;
}

td {
    border:1px solid;
}

Some addresses are longer than others so the row heights need to be dynamic, unfortunately i can't just declare them with css. Any help would be appreciated!

dave
  • 355
  • 5
  • 11
  • 4
    any specific reason to have a new table instead of adding a column with action buttons? – G.Mendes May 08 '14 at 17:03
  • 2
    The idea of G.Mendes is excellent - and also you might consider a "double" or "single" click to edit. – TimSPQR May 08 '14 at 17:15
  • @G.Mendes In the actual application there will be 13 columns with a lot of data - too much to fit on the screen. The idea is that the first table will hold the data and the user can scroll from left to right to see it, while the edit buttons will be fixed on the right hand side. – dave May 08 '14 at 20:26
  • @user3455186 still doable with 1 table, for reference -> http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body – G.Mendes May 13 '14 at 16:47

0 Answers0