HTML/CSS/JS Help Setting up 3 column centered Table

[Brandon H Supervisor]

Hello

 

I'm trying to setup a table on an HTML page that keeps column 1 & 3 the same width.

 

The table itself is set to 100% width and column 2 has a fixed pixel width.

 

The page is for reference instructions and we're trying to keep everything reactive all the way down to mobile.

Currently I have the table columns set to 45% / 10% / 45% and it 'works' but the column width skews when i add things to column 3; I'd like column 1 & 3 to always remain equal in width even if i resize the window. I believe I'll need javascript for this but am not sure

 

does anyone have any advise?

 

here's a couple screenshots to show what I mean:

 

with items in 3rd column:

 

 

basic table code:

<table width="100%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td width="45%" align="right" valign="top"></td>
    <td width="10%" align="center" valign="top"></td>
    <td width="45%" align="left" valign="top"></td>
  </tr>
</table>

 

[Brandon H Supervisor]

oh my god; i feel so silly today. I figured out the correct way to do what I want without affecting the child tables. I just need to set the fixed table as an inline style and not in the CSS

 

so now my basic table setup is as follows and works perfectly in all browsers

 

<table width"100%" border="0" cellspacing="1" cellpadding="1" style="table-layout:fixed">
  <tr>
    <td width="50%" align="right" valign="top">Instruction Text</td>
  </tr>
  <tr>
    <td width="268" align="center" valign="top">Device Screen Display</td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top">Sub Info</td>
  </tr>
</table>

 

[Brandon H Supervisor]

i feel silly and this shows I'm still new to HTML/CSS as I found this can be done without JavaScript.

 

https://css-tricks.com/fixing-tables-long-strings/

 

I knew I needed to make it a fixed table but did not realize you could set 2 columns to the same width % through CSS and they'll remain equal

 

.instructTable {
	table-layout: fixed;
	width: 100%;
}

.instructTable td:nth-Child(2) {
	width: 268px;
}

.instructTable td:nth-Child(1),
.instructTable td:nth-Child(3) {
	width: 50%;
}

is my new table CSS class

[+Matthew S. Subscriber²]

could always use a grid system too, like Bootstrap or Unsemantic

[LaP]

52 minutes ago, Matthew S. said:

could always use a grid system too, like Bootstrap or Unsemantic

It's a table. I don't think he is trying to do a table layout (i hope so anyway). I think he just wants the table to be adaptive with the center column keeping a fixed size in pixels and the two other columns adjusting to 50% of the remaining space. BTW you should probably not use 50% as it's not really 50%. Should probably do :

width: calc(50% - 134px); /* calc is not supported in IE 8 and lower */

Also you should handle the overflow of columns with a fixed table layout. With a fixed table-layout any content of a column that can't be wrapped will not be rendered unless you specify an overflow of scroll or do some mouseover trick.

 

For example this content dhaoisjdipawjipojqweiodjweiojdioqjdiojweiojdweiojdioewjiodjweio in a column with a fixed width of 268px of a table with a fixed layout will be clipped after the first 268px unless the overflow property of the column is set to scroll or the content is wrapped in a div with a mouseover (or click) event showing the content.

 

If you are trying to do a table layout then don't. Use a grid.

Edited August 13, 2018 by LaP

[Brandon H Supervisor]

53 minutes ago, Matthew S. said:

could always use a grid system too, like Bootstrap or Unsemantic

am trying to avoid adding more libraries right now but those are definitely worth looking into

 

@LaP a grid may work better for me; i'm just using the table with no boarders to line up the content

The screen is in the center; instruction on the left; and any extra info about the screen is in another table on the right as shown in the screenshots in the OP

 

I'm finding now that using a 'fixed' table on the outer table it causes internal tables to be forced to 100% width and it will not allow me to adjust individual cell widths so I think i'll look into these grid layouts

 

(notice how the 2nd table is now stretched on the right)

[LaP]

If you don't have to support older browsers there's a native css grid system now. I never used it seriously outside of some tests so i don't know if it's any good.

 

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

 

https://caniuse.com/#search=display%3A grid

Quote

The CSS Grid Layout specification supersedes several older ones. The feature is implemented in most moderne browsers, other than Opera Mini and partial support in Internet Explorer 10 & 11. An overview can be found at css-tricks.com. Because a somewhat large userbase still is not supportet (about 15% according to caniuse.com we recommend you use this feature with caution.

 

Recommended polyfills:

https://github.com/codler/Grid-Layout-Polyfill

http://html5please.com/#grid

[Brandon H Supervisor]

oh nice, was not aware of that; we're coding this new site for current HTML5 standards so old browsers aren't an issue for us

 

edit: thank you @LaP that's going to be exactly what I need; should make things a lot cleaner

 

messing with a snip https://codepen.io/anon/pen/YjgMbV

[Brandon H Supervisor]

ugh IE11 doesn't support the native 'grid' css. the polyfil you listed above uses the '-ms-grid' flag instead which isn't cross compatible

 

does anyone know of a good up-to-date polyfil for grid and know how to implement it or know of alternates to 'grid'?

[Brandon H Supervisor]

14 hours ago, Riva said:

Doesnt this work?

snip

yes but I don't want to effect all tables; i'm still using a couple elsewhere in the page

[LaP]

Like Matthew said you can try bootstrap. You can import just the grid system from their site. I don't think you need the js for just the grid system so you can import the css only.

 

https://github.com/twbs/bootstrap/releases/download/v4.1.3/bootstrap-4.1.3-dist.zip

 

https://getbootstrap.com/docs/4.1/getting-started/contents/#comparison-of-css-files

 

https://getbootstrap.com/docs/4.1/layout/grid/

 

For the grid system only you just need to import bootstrap-grid.min.css. You can import bootstrap-reboot.min.css if you want to standardize cross-browser rendering or you can use Normalize (or nothing). Bootstrap supports IE 10 and 11 only. If you want IE 9 support you'll have the try something else.

[Brandon H Supervisor]

On 8/13/2018 at 10:41 AM, Brandon H said:

i feel silly and this shows I'm still new to HTML/CSS as I found this can be done without JavaScript.

 

https://css-tricks.com/fixing-tables-long-strings/

 

I knew I needed to make it a fixed table but did not realize you could set 2 columns to the same width % through CSS and they'll remain equal

 

.instructTable {
	table-layout: fixed;
	width: 100%;
}

.instructTable td:nth-Child(2) {
	width: 268px;
}

.instructTable td:nth-Child(1),
.instructTable td:nth-Child(3) {
	width: 50%;
}

is my new table CSS class

after playing around some more I managed to isolate the CSS of the internal tables so this method seems to work the best for me right now; I'll look into bootstrap for the future but don't want to add an extra library right now

 

thanks a lot for the suggestions guys; always appreciated

 

native CSS grids would have been perfect if not for the lack of support in IE11 and unfortunately that's my lowest common denominator to support still. oh well