Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Welcome to the Official Site of PHP-Fusion
Sign In
Not a member yet? Click here to register.
Navigation
0 Replies
Falk
Falk Posted 1 year ago 3915 posts

Div Based Table Example, highly configurable

It has some styled labels as well, dropped these out of the project but figured I would share before they poof to cyber space.

The html
echo "<div class='table'>
    <div class='trHeadings'>
       <div class='HeadtdColumn1'>
            Title 1
        </div>
        <div class='HeadtdColumn2'>
         Title 2
        </div>
        <div class='HeadtdColumn3'>
         Title 3
        </div>
        <div class='HeadtdColumn4'>
         Title 4
        </div>
        <div class='HeadtdColumn5'>
         Title 5
        </div>
        <div class='HeadtdColumn6'>
         Title 6
        </div>
   </div>
</div>";

echo "<div class='table'>
         <div class='tr'>
            <div class='tdColumn1'></div>
            <div class='tdColumn2'></div>
            <div class='tdColumn3'></div>
            <div class='tdColumn4'></div>
            <div class='tdColumn5'></div>
            <div class='tdColumn6'></div>
         </div>
      </div>";


The CSS

/* Div Based Table styles */   
.table {
    margin-bottom: 0px; !important;
}

div.table {
    display: table;
}

div.trHeadings {
    display: table-row;
}


div.tr {
    display: table-row;
}

div.HeadtdColumn1, div.HeadtdColumn2, div.HeadtdColumn3, div.HeadtdColumn4, div.HeadtdColumn5, div.HeadtdColumn6 {
    display: table-cell;
    padding: 6px;
    vertical-align: middle;
    border-bottom: 2px solid #fefefe;
}

div.HeadtdColumn1 {
   text-align: center;
   width: 15%;
}
div.HeadtdColumn2 {
    width: 10%;
   text-align: left;
}
div.HeadtdColumn3 {
    width: 20%;
   text-align: center;
}
div.HeadtdColumn4 {
    width: 25%;
   text-align: center;
}
div.HeadtdColumn5 {
    width: 15%;
   text-align: center;
}
div.HeadtdColumn6 {
   width: 15%;
   text-align: center;
}


div.tdColumn1, div.tdColumn2, div.tdColumn3, div.tdColumn4, div.tdColumn5, div.tdColumn6 {
    display: table-cell;
    padding: 6px;
    vertical-align: middle;
}

div.tdColumn1 {
   text-align: center;
   width: 15%;
}
div.tdColumn2 {
    width: 10%;
   text-align: left;
}
div.tdColumn3 {
    width: 20%;
      text-align: center;
}
div.tdColumn4 {
    width: 25%;
      text-align: center;
}
div.tdColumn5 {
    width: 20%;
      text-align: center;
}
div.tdColumn6 {
    width: 15%;
      text-align: center;
}


div.table-list > div.trHeadings {
    background-color: #E6ECEF;
    color: #333;
    font-size: 14px;
}

div.table-list {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

div.table-list > div.tr:hover  {
   background-color: #ecf7ff;
    cursor: pointer;
    cursor: hand;
}

div[class^='tdColumn'], div[class*=' tdColumn'] {
    font-size: 13px;
}
   
div.table-list > div[class^='tdColumn'], div[class*=' tdColumn'] {
    padding: 5px 10px;
    vertical-align: middle;
}

div.tdColumn6 label {
    font-size: 15px;
    font-weight: 100;
    margin: -3px 20px 0 5px;
    vertical-align: top;
    text-transform: uppercase;
    cursor: pointer;
   font-family: "proxima_nova", Arial !important;
    color: #1e202c;
}

div.tdColumn6 input[type="checkbox"] {
    -webkit-appearance: none;
    background: #fff;
    height: 14px;
    width: 14px;
    margin: 0;
    border: 1px solid #cacaca;
    outline: none;
    position: relative;
}

div.tdColumn6 input[type="checkbox"]:checked {
    background-color: #4a921b;
    border: 1px solid #4a921b;
    color: #fff;
}

div.tdColumn6 input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 1px;
    color: #fff;
    font-family: "Times New Roman", Times, serif;
}

div.tdColumn5 label {
    font-size: 15px;
    font-weight: 100;
    margin: -3px 20px 0 5px;
    vertical-align: top;
    text-transform: uppercase;
    cursor: pointer;
   font-family: "proxima_nova", Arial !important;
    color: #1e202c;
}

div.tdColumn5 input[type="checkbox"] {
    -webkit-appearance: none;
    background: #fff;
    height: 14px;
    width: 14px;
    margin: 0;
    border: 1px solid #cacaca;
    outline: none;
    position: relative;
}

div.tdColumn5 input[type="checkbox"]:checked {
    background-color: #4a921b;
    border: 1px solid #4a921b;
    color: #fff;
}

div.tdColumn5 input[type="checkbox"]:checked:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 1px;
    color: #fff;
    font-family: "Times New Roman", Times, serif;
}

0 Replies

Sort replies by

Actions

Sharing

More topics like this

You can view all discussion threads in this forum.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You cannot download attachments in this forum.
Falk

Div Based Table Example, highly configurable
by Falk Posted 1 year ago