使用css将按钮与表中的一行对齐 [英] Aligning buttons with a row in a table using css

问题描述

我正在尝试开发一个可用于编辑数据库信息的表（对于非数据库用户）。这里是我有（对于html）：

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>

这里是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:

这很好，除了右边的删除按钮有点偏离行。这意味着，一旦我们添加〜13或14行，删除按钮离开它将被删除的行。因此，用户不清楚到底哪些行会在删除时被删除。

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.

我想找一些方法，让我对齐一个按钮或者，在这种情况下，几个按钮）与所讨论的表的行，使用CSS。这可能吗？我最初尝试（没有成功）没有第二个表，但是这导致我的当前情况，我有一个表的对齐的目的只有在表的实际包含数据的权利。

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.

我面临的一个大问题是，我似乎无法弄清楚如何将某个对象与表中的行对齐。我可能可以用jQuery做，但这似乎就像把一个锤子到螺丝钉。我承认我不像我在编程的CSS经验，所以我通常倾向于编程答案。有人可以帮我找出如何让这些按钮正确对齐吗？

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?

谢谢！

推荐答案

在行中的最后一个< td> ，然后向右浮动，并提供一个足够大的负右边距，您还需要在表格上留一个正的右边距，以确保有按钮的空间。

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.

例如：

<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>

和一点CSS（带着色，清楚一切都在哪里）：

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;
}

和jsfiddle： http://jsfiddle.net/ambiguous/RE8rK/

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.

这篇关于使用css将按钮与表中的一行对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！