Jump to content

W3 CSS & centering a table

Recommended Posts



Is there an EASY way to have a w3css table that is centered & a variable width. IE not taking up 100% of the available div width.

Ive currently got this code - it is a small width - but it still floats to the left of the screen. 


  <div class="w3-row">
  <div class="w3-half w3-container"  style="margin-left:auto; margin-right:auto;">

<table class="w3-table-all" style="margin-left:auto; margin-right:auto;">

Ive tried with or without (rows, w3-centered, w3-center) - & nothing works, ive added (& not added) the css styles as well.


This website does not contain any information about reducing the horizontal width or the ability to center a table. (all the examples shown, display a table at 100% of the available width).


Does anyone here have the ability to add a  few more examples to the site:





Link to post
Share on other sites

There MUST be an easier way than this - But ive figured it out.  Why have so much HTML code to do such a simple task ? 

Ive got 4 additional divs just to "center" a table within an EXISTING div.  Why ? (ALSO: you need to do the w3-quarter / w3-half BEFORE the w3-content. i tried putting them after ( w3-content w3-half ) , but it didnt work.

<div class="w3-row">
<div class=" w3-quarter w3-container"></div>
<div class="w3-half w3-container">
<table class="w3-table-all">

(Table rows / content)

<div class="w3-quarter w3-container"></div>



Link to post
Share on other sites

Can't you simply add class of size you want such as 'w3-half' to table, then add margin: 0 auto;?

Theres a class 'w3-auto' that gives you margin-left: auto; margin-right: auto; so use that as well

<table class="w3-table-all w3-half w3-auto">
  /*yada yada yada */

Should give 50% width of parent width and centred.

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

FURTHER: Examining the css file, w3-half and the other sizes, are all FLOAT LEFTS.  So even if you want it centered, it wont center. I guess i'll have to create my own extra CSS.



I've added 2 new css classes - By-passing the float lefts.


Would this be useful to add to the "master" file ? (i'm sure you can add various sizes - quarter /third etc...)






Edited by sarahfoxnz
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...