Syncing Column Width of Between Tables in Two Different Frames, etc

Syncing column width of between tables in two different frames, etc

First, set the t1's width to t2's width.
Then, take every td from t1, and set its width matching the widths of t2's columns.

Try this proof of concept: http://jsfiddle.net/HqpGp/.

You will need jQuery, and modify it to work with frames, but i think it's a good start. I'm pretty sure the JS part could be written in a nicer way, though.

Hope it helps!

sync column width between two tables having border-collapse: collapse not working in google chrome

First, make sure to explicitly specify the table-layout CSS property of your tables to fixed:

table.standard {
table-layout: fixed;
[...]
}

Second, after you've adjusted the width of your columns, your tables are not the same size anymore. Make sure they are by executing the following Javascript:

var table_width = $("#t1").width()
$("#t1, #t2").width(table_width);

A complete JSFiddle demo that works in Chrome and Edge is available here.

synchronize view of two JTable

EDIT:
Here's a demo that will synch up the resizing of two tables that have similar columns. The idea is:

  • Create a custom TableColumnModelListener for each table's column model.
  • Upon resize, sync up the column widths. You'll have to disable the other listener temporarily, while this is happening.
  • For moving of columns, implement that logic in columnMoved(...) [left as an exercise]

This shows two-way synching:

import java.awt.*;
import java.util.*;
import javax.swing.*;
import javax.swing.event.*;
import javax.swing.table.*;

public class JTableResizeColumnsDemo implements Runnable
{
JTable table1, table2;
TableColumnModelListener columnListener1, columnListener2;
Map<JTable, TableColumnModelListener> map;

public static void main(String[] args)
{
SwingUtilities.invokeLater(new JTableResizeColumnsDemo());
}

public void run()
{
Vector<String> names = new Vector<String>();
names.add("One");
names.add("Two");
names.add("Three");

table1 = new JTable(null, names);
table2 = new JTable(null, names);

columnListener1 = new ColumnChangeListener(table1, table2);
columnListener2 = new ColumnChangeListener(table2, table1);

table1.getColumnModel().addColumnModelListener(columnListener1);
table2.getColumnModel().addColumnModelListener(columnListener2);

map = new HashMap<JTable, TableColumnModelListener>();
map.put(table1, columnListener1);
map.put(table2, columnListener2);

JPanel p = new JPanel(new GridLayout(2,1));
p.add(new JScrollPane(table1));
p.add(new JScrollPane(table2));

JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(p);
frame.setSize(300, 200);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}

class ColumnChangeListener implements TableColumnModelListener
{
JTable sourceTable;
JTable targetTable;

public ColumnChangeListener(JTable source, JTable target)
{
this.sourceTable = source;
this.targetTable = target;
}

public void columnAdded(TableColumnModelEvent e) {}
public void columnSelectionChanged(ListSelectionEvent e) {}
public void columnRemoved(TableColumnModelEvent e) {}
public void columnMoved(TableColumnModelEvent e) {}

public void columnMarginChanged(ChangeEvent e)
{
TableColumnModel sourceModel = sourceTable.getColumnModel();
TableColumnModel targetModel = targetTable.getColumnModel();
TableColumnModelListener listener = map.get(targetTable);

targetModel.removeColumnModelListener(listener);

for (int i = 0; i < sourceModel.getColumnCount(); i++)
{
targetModel.getColumn(i).setPreferredWidth(sourceModel.getColumn(i).getWidth());
}

targetModel.addColumnModelListener(listener);
}
}
}

Initial size of Text Field is wrong (NSTableView)

Just ran across a similar problem with XCode 12.5. A cell in an NSTableView that was in a xib that was built with an earlier version of Xcode started only filling ~1/2 of the column width after any modification was made to the xib even if the change had nothing remotely to do with the NSTableView. A diff between the working xib and the slightly modified one (only changed one dimension of another control by 1 pixel) showed 27 changes all over the document, mostly slight pixel changes all through the xib. No amount of fidgeting with constraints would fix this. By sheer luck I happened to discover that somehow the TableView's "Style" in the Attributes panel had changed to "Automatic" when the xib was modified with a later version of XCode. Changing the style to "Full Width" makes the cell fill the whole column.

HTML table with fixed headers?

I was looking for a solution for this for a while and found most of the answers are not working or not suitable for my situation, so I wrote a simple solution with jQuery.

This is the solution outline:

  1. Clone the table that needs to have a fixed header, and place the
    cloned copy on top of the original.
  2. Remove the table body from top table.
  3. Remove the table header from bottom table.
  4. Adjust the column widths. (We keep track of the original column widths)

Below is the code in a runnable demo.

function scrolify(tblAsJQueryObject, height) {  var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below // and wrap the table with <div> in the mark-up and assign // height and overflow property var oTblDiv = $("<div/>"); oTblDiv.css('height', height); oTblDiv.css('overflow', 'scroll'); oTbl.wrap(oTblDiv);
// save original width oTbl.attr("data-item-original-width", oTbl.width()); oTbl.find('thead tr td').each(function() { $(this).attr("data-item-original-width", $(this).width()); }); oTbl.find('tbody tr:eq(0) td').each(function() { $(this).attr("data-item-original-width", $(this).width()); });

// clone the original table var newTbl = oTbl.clone();
// remove table header from original table oTbl.find('thead tr').remove(); // remove table body from new table newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl); newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width newTbl.width(newTbl.attr('data-item-original-width')); newTbl.find('thead tr td').each(function() { $(this).width($(this).attr("data-item-original-width")); }); oTbl.width(oTbl.attr('data-item-original-width')); oTbl.find('tbody tr:eq(0) td').each(function() { $(this).width($(this).attr("data-item-original-width")); });}
$(document).ready(function() { scrolify($('#tblNeedsScrolling'), 160); // 160 is height});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div style="width:300px;border:6px green solid;"> <table border="1" width="100%" id="tblNeedsScrolling"> <thead> <tr><th>Header 1</th><th>Header 2</th></tr> </thead> <tbody> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr> <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr> <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr> <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr> <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr> <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr> </tbody> </table></div>


Related Topics



Leave a reply



Submit