Stacked tables td column width

HTML & CSS
1

I want to display several stacked tables on a page, with a resume row and a button to show the rest of rows.
I want all td columns of the same width, to facilitate reading data, apart their different text length.
I used css width with pseudo-classes:

table td:nth-child(1) {
  width:10%;
}

I tried this:

but they are/becomes unaligned…

  1. when I click “show” to show the other rows, td becomes unaligned, changing the width
  2. reclicking to hide the lower table, the width are also different from the beginning, again all td unaligned
2

In the CSS, set table width to 100% and set the ‘td’ and ‘th’ width to 11% (as there are 9 columns). Delete all other widths including inline.

3

Thank you Archibald, but your way I’ll get all td the same width.
Instead I want to choose specific width for each td column: I want they to be the same vertically aligned with all rows of all tables.

Edit:
I tried also removing inline min-width, max-width, but still they are unaligned…

4

There is no way to ensure columns in separate tables are the exact same width. Specifying the column (td) widths is just used as a general guide, not an exact width.

5

The main problem is that you have commented out the table-layout:fixed algorithm and without it widths are only a suggestion and will depend on content.

 table { 
   border-spacing: 4px; 
   border-collapse: separate; 
   margin-left: auto; 
   margin-right: auto;  
   background: #F0F9FF;
   table-layout:fixed;/* important for widths to be obeyed*/
}

Once you have uncommented the css and then removed this erroneous code it will work,

You have this odd snippet.

<tbody></tbody><tr>
    
    <tr

Which is nesting an existing tr.

You can find the code here at line 56:

  <table class="hilite" id="1_1tableResults" style="width: 99%; font-size: 1.1em;"><tbody></tbody><tr>
    
    <tr

It should just be this:

<table class="hilite" id="1_1tableResults" style="width: 99%; font-size: 1.1em;">
<tbody>

Forked working example of your pen.

https://codepen.io/paulobrien/pen/dyNjVqP

When you give widths to a table cells (in the table-layout:auto algorithm) then all widths must add up to 100% exactly or one (or more) must have no width to soak up the difference

6

Unless you use the table-layout:fixed algorithm and then widths win over content and will be obeyed. :slight_smile: Any content that doesn’t fit into a cell will overflow.

1 Like
7

Thank you Paul!
That’s good. Infact I already tried the fixed layout, but it wasn’t working, so I uncommented it temporarily…
It was that tbody thing…!

Ok, there is a little movement on the width when showing/hiding BOTH tables, but that’s acceptable because it is overall the tables and in every case very little.

So, I would ask 2 more things:

  1. I would like, if possible, to indent the rows showed after the button pressed, so initial table resume rows remain more in evidence.
    I don’t want to pad left or margin-left the content of td, but really move the td margin-left to be positioned more on right.

  2. How do you check with JS the actual width assigned by the css pseudo-class td:nth-child?
    I tried to read width property on some rows, with no luck, with this:
    EDIT

console.log($("#1_1tr1")[0].childNodes[3].style.width )

It says width is “”
so how can I read this?

8

You can’t move table cells they are immutable :slight_smile:

The only way you can have the illusion of an indent is to use an empty cell on the nested content and on the parent table have the extra empty cell but colspan it to cover two cells. Table-cells must always align in columns within the same table. The only way to have uneven cells is to use extra cells and then colspan them.

9

Ok, fair enough.
I solved the js with getComputedStyle

10

Here’s a very rough example to get the indent with the extra cell. It’s just proof of concept.

I haven’t worked out the exact widths as was short of time and of course you need to check that you have 10 cells in every row or they are colspanned correctly.

Also it would be much easier if you simply added classes to the dynamic table and then all the hard work can be done in the css :slight_smile:

1 Like
11

Shouldn’t consideration be given as to how this is going to display on small screens or on small browser windows without long words overflowing ?

12

Good question :slight_smile:

It will be a lot of work to linearise something like this into a vertical layout (although not impossible) so may have to go in a max-width wrapper and allow the table to scroll sideways on mobile.

13

Perfect Paul, exactly what I need. I will add the classes dynamically.

@Archibald
For this specific work, these tables are meant to be used only on a desktop environment, so I don’t worry about mobile look. :slightly_smiling_face:

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.