- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试开发一个可用于编辑数据库信息的表(对于非数据库用户)。这是我所拥有的(对于 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 来完成,但这似乎是在用锤子来解决问题。我承认我在 CSS 方面不如在编程方面经验丰富,所以我通常倾向于查看编程答案。有人可以帮我弄清楚如何正确对齐这些按钮吗?
谢谢!
最佳答案
您可以尝试将按钮放在最后一个 <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/
我从空中挑选边距来说明效果,我将计算正确的值由您来决定。
关于html - 使用CSS将按钮与表格中的一行对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4981888/
我希望能够像在 jsFiddle 中那样将元素列表对齐到右侧的复选框。这是如何做到这一点的最佳实践?传统上我从来没有 float 过相互嵌套的元素,所以我想确定这是否是解决此问题的正确方法。 代码(h
指令.align n是什么意思在数组中做什么? 更具体地说,假设我有以下部分代码: array: .align 2 .space 800 它的重要性是什么,为什么不跳过它并使用
基本上我正在寻找一种强制特定相对对齐的方法 即我想保证其他一些值(value) m s.t m > n alignment_of(foo) % 2^m == 2^n IE: .align 2^m; .
在我的代码中,我必须考虑一个数组数组,其中内部数组具有固定维度。为了使用 STL 算法,将数据实际存储为数组的数组很有用,但我还需要将该数据传递给 C 库,该库采用扁平化的 C 样式数组。 如果能够以
横向上,我想显示两个位图,并在它们之间显示一个标签字段。 代码看起来很简单,但所有字段都添加在屏幕左侧。 HorizontalFieldManager hfm = new HorizontalFiel
我想绘制一个变量名称及其符号。因为某些变量的名称很长,所以我试图将换行符与轴标签混合使用。这会导致对齐中发生有趣的事情: par(mar=c(1,12,1,1)) plot( y=1:6, 1:6,
使用这个脚本 df <- data.frame(x = 1:5, y = 1:5, color = letters[1:5]) ggplot(df, aes(x, y, fill = color))
我有一个带有标量字段的结构,比如妈妈,我想在屏幕上对齐的列中显示结构的值,可能还有一些标题。这是一个最小的工作示例: mom.a = 1; mom.b = 2; mom.veryLongName =
在 iOS6 中,我使用自动布局。 我有 2 个以编程方式创建的 View v1 和 v2。 v2 作为 subview 添加到 v1 v1 的约束已通过编程方式创建(此处未显示)。 我希望 v1 和
概述 浏览时operator new, operator new[] - cppreference.com ,似乎我们有许多选项来分配具有特定对齐要求的对象数组。但是,没有指定如何使用它们,而且我似乎
Widget _createProfileContainer() { return new Container( height: 64.0, child: ne
我正在使用 Bootstrap 和语义 UI 的组合来设计和对齐我的网页。目前,我在将页面 api map 和博客文章在整个页面上对齐时遇到问题,而不是像图像所示 那样堆叠在一起。 这是我的底层代码,
所以我已经添加了标签和所有内容,但我仍然在格式化和对齐所有内容时遇到问题。计算按钮显然应该居中。我知道使用 gridbag 将框架分割成坐标系,当一列大于其他列时,它会调整其他列并将其抛弃(对吗?)。
我必须将程序上的按钮对齐到中间,我运行的当前代码但显示的按钮与程序一样大,我想要一个特定大小的中心按钮,这是我尝试过的 /** * Created by Timk9 on 11/04/2016.
我正在尝试将 VIM 作为我的 ruby/rails 编辑器。太胖了,我对它的功能印象深刻 并且我能够安装以下插件以提供更好的 IDE 体验 自动配对 Better-snipmate-snippe
在结构内对齐成员的最佳或常规方法是什么?添加虚拟数组是最佳解决方案吗? 我有一个 double 的结构和 double 的三倍是吗? struct particle{ double mass;
我正在尝试对齐我的输出,但由于某种原因我无法做到我多么想要它,这真的很令人沮丧。标题不会正确对齐。我不知道我是否正确使用了 setw()。 #include using std::cout; usi
我正在开发一个 android 应用程序,其相对布局如下所示。 这是应用程序在屏幕上的显示方式的 imgur 链接:http://imgur.com/c4rNJ .我希望“Text 1”出现在“a l
我不确定为什么我不能在下面的代码中调整按钮的位置。我有几行设置了边界,但我一定遗漏了一些东西。 public DayGUI() { mainFrame = new JF
我有一个 html 页面,我想在页面底部对齐一个 iframe,使 iframe 占据所有宽度,我无法在底部对齐 iframe。请找到底部的 iframe 标签页面。 The rest of th
我是一名优秀的程序员,十分优秀!