List and Items Styling Template - Using a Table

by chucknelson

HTML

<div id="list-container-single">

    <p>Single-item list, for iterating</p>
    <ul id="single-list">
        <li>
            <table>
                <tr>
                    <td class="descriptors">
                        <a href="#item">
                            <span class="name">Item 1</span>
                            <span class="caption">Item Caption</span>
                        </a>
                    </td>
                    <td class="edit">
                        <a href="#edit">Edit</a>
                    </td>
                    <td class="delete">
                        <a href="#delete">Delete</a>
                    </td>
                </tr>
            </table>
        </li>
    </ul>
    
</div>

<div id="list-container-multi">
    
    <p>Multi-item list, for further testing (populated via JS)</p>
    <ul id="multi-list">
    </ul>
   
</div>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

a:hover {
    background-color: yellow !important;
}

ul {
    padding-left: 0;
    list-style-type: none;
    background-color: #eee;    
}

li {
    width: 100%;
    background-color: #ddd;
    border: 1px solid #000;
}

li table {
    height: 100%;
    width: 100%;
}

li table td {
    height: 3em;
}

li table td a {
    display: block;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    text-decoration: none;
}

li table td span {
    display: block;
    background-color: orange;
}

li td.descriptors {
    width: 70%;
}

li td.descriptors a {
    background-color: #f99;
}

li span.caption {
    color: #444;
    font-size:.75em;
}

li td.edit {
    width: 15%;
    text-align: center;
}

li td.edit a {
    background-color: #dfd;
}

li td.delete {
    width: 15%;
    text-align: center;
}

li td.delete a {
    background-color: #ddf;
}

JavaScript

/* 
    Copying of the template item to test other scenarios.
    This eliminates the need to copy+paste any changes to the template item.
*/

$('#single-list li').clone().appendTo('#multi-list');

var multiLineItem = $('#single-list li').clone();
multiLineItem.find('.name').html('This is a really long, multi-line item to make sure wrapping works as expected! This text just keeps going on and on so we have a nice long item! This is the last chunk of text to really make this item long.');
multiLineItem.appendTo('#multi-list');

$('#single-list li').clone().appendTo('#multi-list').find('.name').html('Item 3');