• Francisco T. Arquer

    (@francisco-arquer-thome)


    Hi. First, this plugin is amazing.

    A Question. It’s possible to list the posts inside a table with two columns?

    I try to put the code between

    <td></td>

    :

    <table border="0" bgcolor="transparent">
    <tbody>
    <tr>
    <tbody>
    <tr>
    <td></td>
    </tr>
    </tbody>
    </table>

    But it was very ugly and barely functional.
    What can I put in CSS (for example) to have two columns?

    Thank you very much

    https://www.ads-software.com/plugins/w4-post-list/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Shazzad Hossain Khan

    (@sajib1223)

    I really don’t know a solution for table, but it’s possible with css and ul>li.

    Template:
    <ul>[posts]<li>...whatever your code...</li>[/posts]</ul>

    Give the list a Class, ex: twocolumn.

    Css:

    .twocolumn ul li{ width: 50%; float: left; box-sizing:border-box; padding: 10px; }
    .twocolumn ul li:nth-child(2n+1){ clear: left; }

    Maybe display:table-cell directive can help you.

    I used the following to produce a table, seems to work fine:

    List:

    <ul class="testTable">
      <div class="testHeader">
          <li class="testRow">
              <span>Title</span>
              <span>Speaker</span>
              <span>Series</span>
    
      </div>
      <div class="testBody">
      [posts]<li class="testRow">
              <span>[title]</span>
              <span>[post_terms tax="speaker"]</span>
              <span>[post_terms tax="series"]</span>
          [/posts]
       </div>

    and the css:

    .testTable {
        display: table;
        margin: 0px;
        padding: 0px;
      }
      .entry ul.testTable li {
          list-style-type:none;
      }
      .entry ul.testTable li ul {
        padding-left: 0;
      }
    
      .testRow {
        display: table-row;
      }
    
      .testRow > span {
        list-style:none;
        display: table-cell;
        border: 1px solid #000;
        padding: 2px 6px;
      }
    
      .testHeader {
        display: table-header-group;
        /*position: absolute;*/
      }
    
      .testHeader span {
        background-color: #ccc;
      }
    
      .testBody {
        display: table-row-group;
      }

    That produces a table with a table header

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘List posts in tables with 2 columns’ is closed to new replies.