Question

I’m trying to develop a table that can be used to edit database information (for non-database users). Here’s what I have (for html):

<table id="myTable" cellspacing='0'>
    <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
    <tr id='1'><td>1</td><td>1</td><td>2</td>
    <td style=" table-layout:fixed">
     <div style="width:0px;overflow:visible;position:relative">
        <a style="display:block;position:relative;left:20px">-</a>
     </div>
    </td>

    </tr>
    <tr id='2' class='even'><td>3</td><td>5</td><td>8</td></tr>
    <tr id='3'><td>13</td><td>21</td><td>34</td></tr>
    <tr id='4' class='even'><td>55</td><td>89</td><td>144</td></tr>
    <tr id='5'><td>233</td><td>377</td><td>610</td></tr>
</table>
<input class="addRow" type="button" value="+">
</table>

Here’s the CSS:

table {
    background: #E0F5F9;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 0px;
    border-style: solid;
    border-width: 2px;
    border-color: #1C9CBC;  
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

table th {
    padding:4px 10px;
    background: #A8A8A8;
}

table td {
    background:#fff;
    padding:2px 10px 4px 10px;
}

div.editableTable {
    display: inline;
}

input.addRow {
    margin-left: 10px;
    border: solid 2px #1C9CBC;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    padding-left: 5px;
    padding-right: 5px;
    background: #A8A8A8;

}

table tr.even td {background:#98E6F9}
table tr td {
    background: #E0F5F9;
}

table tr.editing td {
    background: #FF0000;
}

table tr.selectedEven td {
    background: #98E6F9;
    border-left-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #03C100;
}

table tr.selectedEven td:first-child {
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #03C100;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px;
    -webkit-border-top-left-radius:10px;
    border-top-left-radius:10px;
}

table tr.selectedEven td:last-child {
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #03C100;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
}

table tr.selectedEven td:last-child {
    border-left-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: #03C100;
}

table tr.selected td {
    /* background: #E0F5F9; */
    border-left-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #03C100;
}

table tr.selected td:first-child {
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #03C100;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px;
    -webkit-border-top-left-radius:10px;
    border-top-left-radius:10px;
}

table tr.selected td:last-child {
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-style: solid;
    border-color: #03C100;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
}

table tr.selected td:last-child {
    border-left-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: #03C100;
}

table tr:last-child td:first-child {
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px}

table tr:last-child td:last-child {
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px
}

And, here’s what it looks like:

This is fine, except that the delete button on the right side is a little off from the row. This means that once we add ~13 or 14 rows, the delete button is way off from the row that it’s going to be deleting. Thus, it’s unclear to the user exactly which row will be removed when they hit remove.

I’d like to find some method that will allow me to align a button (or, in this case, a few buttons) with the row of the table in question, using CSS. Is this possible? I tried initially (without success) to do this without a second table, but that led me to the current situation, where I have a table for alignment purposes only on the right of the table that actually contains the data.

The big problem I’m faced with is that I can’t seem to figure out how to align something with a row in a table. I could probably do it with jQuery, but this seems like taking a hammer to a screw. I’ll admit I’m not as experienced at CSS as I am at programming, and so I usually tend to look to the programming answer. Can someone help me figure out how to have these buttons aligned correctly?

Thank you!

Answer 1

You could try placing the button inside the last <td> in the row and then float it to the right and provide a large enough negative right margin to get it outside the table; you’ll also need a positive right margin on the table to make sure there is space for the button.

For example:

<table>
    <tbody>
        <tr>
            <td>kdsjfkdsl fds</td>
            <td><span class="killer">X</span>Appropriately architect 24/365 internal or "organic" sources after fully tested portals. Monotonectally leverage existing an expanded array of action items before resource maximizing growth strategies. Proactively drive orthogonal ROI before sustainable relationships.</td>
        </tr>
        <tr>
            <td>2193485798435</td>
            <td><span class="killer">X</span>Enthusiastically deploy team building data with e-business internal or "organic" sources. Enthusiastically negotiate diverse models for transparent communities. Intrinsicly disseminate just in time markets before vertical paradigms. Authoritatively brand performance based web-readiness for error-free growth strategies. Energistically empower customer directed markets with quality data. Distinctively productivate backward-compatible potentialities before prospective technology.</td>
        </tr>
    </tbody>
</table>

And a bit of CSS (with coloring to make it clear where everything is):

table {
    margin-right: 2em;
}
td {
    padding: 5px;
    border: 1px solid green;
}
span.killer {
    float: right;
    margin-right: -1.5em;
    color: red;
    font-weight: bold;
}

And the jsfiddle: http://jsfiddle.net/ambiguous/RE8rK/

I picked the margins out of the air to illustrate the effect, I’ll leave computing the proper values up to you.