html – 使用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> < 我正在尝试开发一个可用于编辑数据库信息的表(对于非数据库用户).这是我的(对于 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 >     <div >        <a >-</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  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做到这一点,但这看起来像是用锤子敲打螺丝.我承认我在编程方面不像CSS那样经验丰富,所以我通常倾向于查看编程答案.有人可以帮我弄清楚如何正确对齐这些按钮吗？

谢谢！

解决方法 您可以尝试将按钮放在最后一个< td>内.在行中然后将其浮动到右边并提供足够大的负右边距以使其在表外;你还需要在桌子上有一个正的右边距,以确保按钮有空间.

例如：

<table>    <tbody>        <tr>            <td>kdsjfkdsl fds</td>            <td><span >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 >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/

我从空中挑选了边距以说明效果,我将为您计算正确的值.

总结

以上是内存溢出为你收集整理的html – 使用css将按钮与表中的行对齐全部内容，希望文章能够帮你解决html – 使用css将按钮与表中的行对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。