使用css将表中的行与表中的行对齐
我正在尝试开发一个可用于编辑数据库信息的表（对于非数据库用户）。 这是我的（对于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
}
而且，这是它的样子：
这很好，除了右侧的删除按钮与行有点偏离之外。 这意味着一旦我们添加〜13或14行，删除按钮就会从它将要删除的那一行开始。 因此，用户不清楚哪些行在删除时会被删除。
我想找到一些方法，使我可以使用CSS将一个按钮（或者，在这种情况下是几个按钮）与表格的行对齐。 这可能吗？ 我最初（没有成功）尝试没有第二个表，但是这导致我目前的情况，我有一个表仅用于实际包含数据的表右侧的对齐目的。
我面临的一个大问题是，我似乎无法弄清楚如何在表格中对齐某行。 我大概可以用jQuery来做，但是这似乎像是一把锤子。 我承认我不像在编程方面那样经验丰富，所以我通常倾向于寻找编程的答案。 有人能帮我弄清楚如何让这些按钮正确对齐吗？
谢谢！
您可以尝试将按钮放在行中的最后一个<td>内，然后将其向右移动并提供足够大的负右边距以将其放到表格外; 您还需要在桌面上有正确的右边距，以确保按钮有空间。
例如：
<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（用着色来清楚说明所有内容）：
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/
我选择了空白边缘来说明效果，我会留下适当的价值。
你可以使用JavaScript，但不能用CSS可靠地完成（除非你想限制单元格高度）。 我建议只需将按钮放在原始表格的同一行（即添加另一列）并从该列中删除样式。 你可能不得不放弃圆角，但你的颜色和边界可以保留。
编辑：下面的代码可能让你保持你的圆角。
<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
table {
table-layout: fixed;
}
table td:last-child, table th:last-child {
width: 0;
padding: 0;
}