• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0

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

Question

Brandon H    2,031

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:

image.thumb.png.2fc1a9e3f4e42e3b08a77930a735ce8f.png

 

with items in 3rd column:

image.thumb.png.70a4d611a903589fd3af47a9194f94e2.png 

 

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>

 

Share this post


Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Brandon H    2,031

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 :rofl:

 

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>

 

Share this post


Link to post
Share on other sites
  • 0
Brandon H    2,031

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

Share this post


Link to post
Share on other sites
  • 0
Matthew S.    393

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

Share this post


Link to post
Share on other sites
  • 0
LaP    1,873
Posted (edited)
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 by LaP

Share this post


Link to post
Share on other sites
  • 0
Brandon H    2,031
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

 

image.thumb.png.68f93bb3b2bebe13c773951e8bd1382d.png

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

Share this post


Link to post
Share on other sites
  • 0
LaP    1,873
Posted (edited)

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

Share this post


Link to post
Share on other sites
  • 0
Brandon H    2,031

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

Share this post


Link to post
Share on other sites
  • 0
Brandon H    2,031

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'?

Share this post


Link to post
Share on other sites
  • 0
Riva    950

Doesnt this work?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        table {
            border: 1px solid #000000;
            width: 500px;
        }

            table tr td:nth-child(2) {
                min-width: 10%;
                background-color: green;
                text-align: center;
                align-content: center
            }

            table tr td {
                color: #fff;
            }

                table tr td:nth-child(1) {
                    text-align: left;
                    align-content: left;
                    background-color: red
                }

                table tr td:nth-child(3) {
                    text-align: right;
                    align-content: right;
                    background-color: blue;
                }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
        </tbody>
    </table>
</html>

 

Share this post


Link to post
Share on other sites
  • 0
Brandon H    2,031
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

Share this post


Link to post
Share on other sites
  • 0
LaP    1,873
Posted (edited)

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.

Share this post


Link to post
Share on other sites
  • 0
Riva    950
6 hours ago, Brandon H said:

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

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .theTable {
            border: 1px solid #000000;
            width: 550px;
        }

            .theTable tr td:nth-child(2) {
                min-width: 20px;
                max-width: 20%;
                background-color: green;
                text-align: center;
            }

            .theTable tr td {
                color: #fff;
                white-space: pre-line;
                overflow: scroll;
            }

                .theTable tr td:nth-child(1) {
                    text-align: left;
                    background-color: red;
                    max-width: 40%;
                    min-width: 40%;
                }

                .theTable tr td:nth-child(3) {
                    text-align: right;
                    background-color: blue;
                    max-width: 40%;
                    min-width: 40%;
                }
    </style>
</head>
<body>
    <table class="theTable">
        <thead>
            <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ornare aenean euismod elementum nisi. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Tortor condimentum lacinia quis vel eros donec. Leo vel orci porta non pulvinar neque laoreet suspendisse. At imperdiet dui accumsan sit amet nulla. Condimentum vitae sapien pellentesque habitant. In hac habitasse platea dictumst vestibulum rhoncus. Velit egestas dui id ornare arcu odio ut sem nulla. Eget gravida ###### sociis natoque. Et tortor consequat id porta nibh venenatis cras sed. Semper quis lectus nulla at volutpat diam ut. Cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Adipiscing vitae proin sagittis nisl rhoncus mattis. Tortor condimentum lacinia quis vel eros donec ac odio. Et odio pellentesque diam volutpat commodo sed egestas egestas.

                        At auctor urna nunc id cursus metus aliquam eleifend mi. At risus viverra adipiscing at in. Mauris cursus mattis molestie a iaculis at erat. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Turpis egestas sed tempus urna et pharetra pharetra massa. Felis eget velit aliquet sagittis id consectetur. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Non odio euismod lacinia at quis risus. Accumsan sit amet nulla facilisi. Eget arcu dictum varius duis at consectetur. Sem fringilla ut morbi tincidunt. Urna molestie at elementum eu. Libero enim sed faucibus turpis in. Diam sit amet nisl suscipit adipiscing bibendum est. Fermentum iaculis eu non diam phasellus vestibulum lorem. Volutpat blandit aliquam etiam erat velit. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Proin fermentum leo vel orci. Non enim praesent elementum facilisis leo. Nulla malesuada pellentesque elit eget gravida ###### sociis natoque.

                        Sit amet tellus cras adipiscing enim eu turpis egestas. Velit egestas dui id ornare. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Semper feugiat nibh sed pulvinar proin gravida. Lacus vel facilisis volutpat est velit egestas dui id ornare. Sit amet nulla facilisi morbi tempus iaculis urna. At risus viverra adipiscing at in tellus integer feugiat. Congue eu consequat ac felis donec. Id semper risus in hendrerit. Et ultrices neque ornare aenean euismod elementum nisi quis. Enim facilisis gravida neque convallis. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Egestas quis ipsum suspendisse ultrices gravida dictum fusce. Gravida in fermentum et sollicitudin. Commodo elit at imperdiet dui. Cras ornare arcu dui vivamus arcu felis.

                        Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Ultricies integer quis auctor elit sed vulputate mi sit. Commodo odio aenean sed adipiscing. Diam vulputate ut pharetra sit amet aliquam id. Id semper risus in hendrerit. Ac placerat vestibulum lectus mauris ultrices. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. Faucibus vitae aliquet nec ullamcorper sit. Viverra justo nec ultrices dui sapien eget mi proin. Est pellentesque elit ullamcorper dignissim cras tincidunt. Arcu risus quis varius quam. Ut etiam sit amet nisl purus in. Scelerisque in dictum non consectetur a erat nam at. Leo urna molestie at elementum. Amet cursus sit amet dictum sit amet. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Feugiat nisl pretium fusce id. Felis imperdiet proin fermentum leo vel. Etiam dignissim diam quis enim lobortis scelerisque.

                        Senectus et netus et malesuada. Accumsan in nisl nisi scelerisque eu ultrices vitae. Dictum fusce ut placerat orci nulla pellentesque dignissim enim. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Porta lorem mollis aliquam ut. Ac ut consequat semper viverra nam. Quis varius quam quisque id diam vel quam elementum pulvinar. Diam vel quam elementum pulvinar etiam non quam lacus suspendisse. Tortor condimentum lacinia quis vel eros donec ac. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Commodo sed egestas egestas fringilla phasellus faucibus. Et malesuada fames ac turpis egestas sed tempus. Praesent semper feugiat nibh sed pulvinar proin. Lobortis elementum nibh tellus molestie nunc non blandit massa enim. Aliquet enim tortor at auctor urna nunc.
                </td>
            </tr>
        </tbody>
    </table>
</html>

 

Share this post


Link to post
Share on other sites
  • 0
Brandon H    2,031
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.