[FREE] TableViewer - fully style customized to show table data

Extensions
818

In the attached file there is a shopping list to which you can add, remove and move items, can you improve the code? I put the datafile in media for use with companion.
SpesaTableviewerJS.aia (34.7 KB)

819

Could be easier with a couple of listviews and spinners ?

shoppinglist.aia (5.6 KB)

820

I think so, see my aia. Thank you
shoppinglistLV.aia (8.2 KB)
Can I reduce the line spacing ?

821

Might become more difficult to accurately select an item if any smaller ?

Screenshot_20260125-163136
Screenshot_20260125-1631361080×2400 107 KB

822

I would reduce the line spacing, not the font size

823

We are off topic now, start a new topic if you want to discuss modifying the appearance of a listview.

824

You said me "go back to Tableviewer and use css to create smaller table cells (no padding, and reduce height)"
Can you help me ?

825

CSS Table Cell Padding

Cell Padding in CSS is controlled using the padding property on td and th elements. This sets the space between the cell content and its inner border, directly replacing the deprecated cellpadding attribute in HTML.

Cell Spacing (the space between table cells) is managed using the border-spacing property on the <table> element. This property works when border-collapse is set to separate. It defines the gap between the borders of adjacent cells, replacing the cellspacing attribute.

  • Use table { border-spacing: 10px; } to add 10 pixels of space between cells.
  • Use td, th { padding: 10px; } to add 10 pixels of padding inside each cell.

Note: margin does not work on individual table cells (td, th) for spacing between cells. To simulate cell margins, use border-spacing or wrap cell content in a <div> and apply margin to that.

Best Practice: Always set border-collapse: separate; when using border-spacing, and border-collapse: collapse; to merge cell borders and eliminate spacing.

Try with border-spacing:0px;padding:0px;

This is as tight as I can get it:

image
image885×365 39.3 KB

table{width:50%;border-collapse:separate;border-spacing:0px}
td{border:0px;padding:0px;font-size:30px;text-align:left;}

ref

826

Thanks, it runs very well