html - Combining "column-count" and "display: table" renders single column in Firefox -

i trying work out issue in firefox (i'm using 40.0.3) using -moz-column-count , display: table causes list display 1 column. here's example , jsfiddle:

div {    -webkit-column-count: 2; /* chrome, safari, opera */    -moz-column-count: 2; /* firefox */    column-count: 2;  }    ul {    display: table;    margin: 0 auto;  }

<div>    <ul>      <li>abcd</li>      <li>b</li>      <li>cdefg</li>      <li>d</li>    </ul>  </div>

i'm using display: table center columns in div. in edge, ie10 , chrome list in 2 columns.

my question how can 2 columns display: table in firefox or how center list works in browsers.

actually, think chrome , ie ones being wrong. do give want, should not, ff.

in code 'say' split-div-in-2-columns put in 1 ul. when split ul in 2 (see snippet) ff works expected, ch , ie btw.

if had created code would expect 1 column, namely ul of li's (or 1 div of p's, 1 p of span's, etc.). second ul second column (a second div..., etc.). hence conclusion chrome , ie mess up.

i hate unexpected behaviour this, makes 1 unsure browser correct.

here corrected code:

div {    -webkit-column-count: 2; /* chrome, safari, opera */    -moz-column-count: 2; /* firefox */    column-count: 2; /* demo code */  }  ul {    display: table;    margin: 0 auto;  }

<div>    <ul>      <li>abcd</li>      <li>b</li>    </ul>    <ul>      <li>cdefg</li>      <li>d</li>    </ul>  </div>

- update demo code -

in addition demo snippet how use without table. take your code remove table stuff , move column-count ul.

that works well:

ul, li {      list-style-type: none; padding: 0;  }    div {      width: 500px; /* width */      border: 2px dashed silver;      margin: 0 auto; /* center in body */  }  ul {      -webkit-column-count: 2; /* chrome, safari, opera */      -moz-column-count: 2; /* firefox */      column-count: 2;      margin: 0 auto; /* center in div */  }    li {      border: 1px dotted red;  }

 <div>      <ul>          <li>abcd</li>          <li>b</li>          <li>cdefg</li>          <li>d</li>      </ul>  </div>