Jump to content
sarahfoxnz

W3 CSS & centering a table

Recommended Posts

Hello.

 

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:

 

https://www.w3schools.com/w3css/w3css_tables.asp

 

 

Share this post


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)

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

 

 

Share this post


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 */
  
</table>

Should give 50% width of parent width and centred.

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Ive checked & downloaded a fresh copy of the latest CSS (my one did not have w3-auto. ) Ive now got w3-auto, and use this (removing my excess divs)

 

<table class="w3-table-all w3-border  w3-half w3-auto">

However its left-aligned. The auto option does not work on tables. 

Share this post


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.

FIXED.

 

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...)

 

.w3-table-center{margin-left:auto;margin-right:auto}
.w3-table-half{width:49.99999%}
 

 

 

 

Edited by sarahfoxnz

Share this post


Link to post
Share on other sites

Just add

	.w3-auto{float:none;}
	

To custom external file that's link sit below the w3 css file link.

Edited by dsonesuk

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

×