Html 使用css将按钮与表格中的一行对齐

Aligning buttons with a row in a table using css

提问by jwir3

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

我正在尝试开发一个可用于编辑数据库信息的表（对于非数据库用户）。这是我所拥有的（对于 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:

这是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.

这很好，只是右侧的删除按钮离行有点远。这意味着一旦我们添加了大约 13 或 14 行，删除按钮就会远离它要删除的行。因此，用户不清楚当他们点击删除时将删除哪一行。

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.

我想找到一些方法，允许我使用 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?

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

Thank you!

谢谢！

采纳答案by mu is too short

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.

您可以尝试将按钮放在<td>行的最后一个内部，然后将其向右浮动并提供足够大的负右边距以将其移出表格；您还需要在表格上有一个正的右边距，以确保按钮有空间。

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

还有一点 CSS（用颜色来说明一切都在哪里）：

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/

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

我从空中挑选了边距来说明效果，我将计算适当的值留给您。

回答by SpliFF

You could use javascript but it can't be done reliably with CSS (unless you want to restrict cell height). I'd recommend just putting the button in the same row in the original table (ie, add another column) and removing styles from that column. You might have to give up the rounded corners though but your colors and borders can be preserved.

您可以使用 javascript，但不能用 CSS 可靠地完成（除非您想限制单元格高度）。我建议只将按钮放在原始表格的同一行中（即，添加另一列）并从该列中删除样式。您可能不得不放弃圆角，但可以保留您的颜色和边框。

EDIT: The code below might let you keep your rounded corners.

编辑：下面的代码可能会让你保持圆角。

<tr>
  <td>data</td>
  <td>data</td>
  <td style="width:1px">
     <div style="width:1px;overflow:visible;position:relative">
        <a style="display:block;position:relative;left:20px">-</a>
     </div>
  </td>
</tr>

CSS

CSS

table {
  table-layout: fixed;
}
table td:last-child, table th:last-child {
  width: 0;
  padding: 0;
}