Sunday, April 10, 2016

cannot center table in firefox

By Hường Hana 12:30 PM , , , Leave a Comment

So I have these two tables 

    <table  id="pointsTable" >           <th> One </th>                                                      <th> Two </th>                                          <th> Three </th>           <tr>            <td  id="one" ></td>                           <td  id="two"></td>                          <td  id="three"></td>                                       </tr>     </table>                                                                                 <table id="pointsTableSmall" style="text-align: center;">           <tr>              <th> One </th>           </tr>           <tr>           <td  id="one"></td>           </tr>           <tr>           <th>Two </th>           </tr>           <tr>           <td  id="two" ></td>           </tr>           <tr>           <th>Three</th>           </tr>           <tr>           <td  id="three" ></td>           </tr>    </table>

The first is visible in large screens and the second one, the smaller, is visible in smaller screens.

Their css is 

#pointsTable, #pointsTableSmall{     border: 0;     border-style: 0;        margin: auto !important;     padding: auto;     text-align: center !important;      }

Their wrap div has

#pointWrap{     text-align: center; }

In Firefox 45.0.1 the table is aligned left , has margin : auto and no padding . There is a gap in the right side between the left aligned-gap an its container div.

I cannot center that pointsTableSmall table. How can I fix this?

Thanks

Update

Now, the table is

            <div class="container center-block" id="pointsTableSmallWrap">                 <table id="pointsTableSmall" align="center" class="center-block">                     <tr>                       <th>Hey </th>                     </tr>                     <tr>                       <td class="heyT", id="heyTS"> more hey</td>                     </tr>                     <tr>                       <th>Hi</th>                     </tr>                     <tr>                       <td class="hiA" id="hiAS" ></td>                     </tr>                     <tr>                       <th>Yo</th>                     </tr>                     <tr>                       <td class="yoU" id="yoUS" ></td>                     </tr>                </table>             </div>

Each <td> has graphics from the progressbar.js library.

The css is

#pointsTableSmall{     display: none;     text-align: center !important;           align-self: center;      alignment-adjust: central;      align-content: center;     align : center;     padding: 0;     margin: 0 auto;     width: 100%;     margin-left: 1%;     margin-right: 1%; }  #pointsTableSmallWrap{     align-content: center;     align-self: center;     align-items: center;     text-align: center;     align :center;     margin: 0 auto;     width: 100%; }  #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr{     align-content: center;     align-self: center;     align-items: center;     text-align: center;     align :center;     margin: 0 auto;     width: 100%;     margin-left: 1%;     margin-right: 1%; }

The problem

In Firefox the table always sits on the left (check image to help you). I dont know how to center it. I tried

I replaced table with bootstrap div class="col-md-4" but they go one under the other even in medium screen sizes and look ugly

I replaced table with flexbox that is awesome in small screens , but again in medium screens they dont stick one net to the other and look ugly

I tried adding margin-left, margin-right on the tables and the wrap , but nothing.

Please help me center this table

Thanks

enter image description here

8 Answers

Answers 1

There are quite a few things wrong in your code.

You've put a comma between class="heyT" and id="heyTS" in your HTML, as well as some unneeded whitespace

In your CSS, you've used alignment-adjust, which isn't supported by any browser (I think?). Googling the property didn't make the W3C or Mozilla spec show up. You've also used align-self and align-content, which are flex-box properties. You are not using flex-box in your code. You're also using align, which doesn't have a meaning.

Then there's the place where you apply margin: 0 auto;, but after that you apply margin-left: 1%; and margin-right: 1%;. Having these rules together means you end up with a margin of 0 1% 0 1% (0 at the top and bottom. 1% at the left and right).

The solution to your problem

In this Fiddle, you can see that the table has a width of 50% and that it's aligned to the center. You can remove the width of 50%, and have it be as small as possible.

All I've done is remove the container div, as it didn't serve any purpose. I also removed the styles that you were applying to #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr also because it didn't serve any purpose.

Basically, the thing stopping you from having it centered, was because the table had a width of 100%. The only thing necessary to center a table is margin: 0 auto; and a width that isn't 100%

Hope this helps

Answers 2

overflow:auto;

Quite often, I find that I've missed a bit of CSS which is critical in allowing Margin: 0 auto; to work. It must have a width. It mustn't be floating left, right or centred. It must be displayed block. You mustn't give the div a fixed position.

Refer here: What, exactly, is needed for "margin: 0 auto;" to work?

Answers 3

The problem is that you're overriding your own declarations of margin, with:

margin: 0 auto; margin-left: 1%; margin-right: 1%;

The code becomes:

margin: 0 1%;

For hidding the table in media queries, changing display property between block and none is enough.

a) To center the table:

#pointsTableSmall {   width: 100%;   margin: 0 auto; }

b) To center td elements:

<td align="center" id="heyTS"> more hey</td>

Example: https://codepen.io/anon/pen/aNEgxz

Answers 4

I forgot to mention that the css of the #pointsTableSmall has display: none; and then I wrote some media-queries to make it visible in small screens.

So in my media queries I do

  #pointsTableSmall {     display: block;   }

All I had to do is replace the css of #pointsTableSmall with the one Gust van de Wal wrote here.

Completely remove the css about #pointsTableSmallWrap and #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr and remove the pointsTableSmallWrap div itself.

Also, and here is the trick, replace 

  #pointsTableSmall {     display: block;   }

with 

  #pointsTableSmall {     display: inline;   }

display: inline is the default value.

This was the trick. This. Was. The Trick. Just a simple value. Oh, I love CSS.

Answers 5

I would suggest you to encapsulate the table in a div and give the center alignment to this div with display: inline-block; and margin: auto;. You will probbaly need to give a width=100% to your table

Answers 6

the question is not clear but i think you want to make table center instead of text align center so,

May be your table has float property in other css that's why your element is not centering margin:auto; will not work with floted element if you want to center you have to remove float property.

Another Solution take another element before table and use table inside it for example

Html 

<div class="center">    // your table here </div>

CSS

.center {    width:500px; /* waht ever width */    margin:auto; }

Note: in your code you are using Margin property in tr, The margin property don't work with display:table display:table:cell; display : table-row see here

Answers 7

if you want to make the inner table in center , no matter what you do when you resize , just add this

  1. margin-left:auto
  2. margin-right:auto

into the id of the specific table you want in the css...

Answers 8

<table align="center">

Use this attribute in table it will be center aligned in all browsers

Here is the fiddle

https://jsfiddle.net/yudi/m8pyhenx/3/

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment