tables W3 CSS & centering a table

[sarahfoxnz]

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

 

 

[sarahfoxnz]

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>
 

 

 

[dsonesuk]

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 January 6, 2019 by dsonesuk

[sarahfoxnz]

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. 

[sarahfoxnz]

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 January 6, 2019 by sarahfoxnz

[dsonesuk]

Just add

	.w3-auto{float:none;}
	

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

Edited January 6, 2019 by dsonesuk