html5表格顶端对齐,HTML5中间对齐表格数据(HTML5 middle align in table data)

缺乏、安全感 2022-10-06 12:46 215阅读 0赞

HTML5中间对齐表格数据(HTML5 middle align in table data)

我有一个大表，这是该表的最后一行：

Back

value="$\{placeholder.placeholder\_id\}">Delete

在我的最后一个td内部有两个按钮(这是一个很好的方法吗？)。 我想要做的是中间对齐“后退”和“删除”按钮，使它们看起来不错。 现在它看起来像一个曲折(见图)。 我已经为这些按钮添加了id或class -tags，并尝试使用bottom，left，display，float等命令移动它们，但没有结果。

我不能制作两个td(一个按钮一个td)，因为td之间有太多空间。

![MQzDm.jpg][]

我该怎么办？

I have a big table and this is the last row of that table:

Back

value="$\{placeholder.placeholder\_id\}">Delete

Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.

I can't make two td's (one td for one button) because there is so much space between td's.

![MQzDm.jpg][]

What should I do?

原文：https://stackoverflow.com/questions/21916358

更新时间：2019-11-05 06:52

最满意答案

\[编辑\]这是一个jsFiddle来演示。 \[/编辑\]

表单是块级元素，只需将它们转换为inline-block ，它们就可以很好地并排放置。

<table> 
 <tbody> 
 <tr> 
 <td>BackDelete</td> 
 </tr> 
 </tbody> 
</table>

样式作为样式表的一部分会更好地完成，但为了简单起见，这里将其添加为样式属性。

\[edit\] Here is a jsFiddle to demonstrate. \[/edit\]

Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.

<table> 
 <tbody> 
 <tr> 
 <td>BackDelete</td> 
 </tr> 
 </tbody> 
</table>

The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.

相关问答

\[编辑\]这是一个jsFiddle来演示。 \[/编辑\] 表单是块级元素，只需将它们转换为inline-block ，它们就可以很好地并排放置。

<table> 
 <tbody> 
 <tr> 
 <td>Back...您只需要在stickycol css类中添加几个css属性。 align-items：center和display：flex用于真正对齐 justify-content和text-align用于水平对齐。 看到片段。 table { border-collapse: separate;border-top: 3px solid grey;}td,th { ...您可以使用flexbox。 .container { display: flex;align-items: center;}.container button { margin-left: .5em;} </td> 
 <td> 
 <div> 
 <div> 
 Text Not In Middle Of Cell 
 </div> 
 <div> 
 Bu 
 ... 
 UITableView是UIScrollView的子类，因此您可以使用： scrollRectToVisible: animated: 
 并自己计算CGRect，这样你就可以获得比使用更多的控制： scrollToRowAtIndexPath 
 UITableView is a subclass of UIScrollView so you can use: scrollRectToVisible: animated: 
 ... 
 你为什么用桌子？ 我认为这更好： HTML： 
 5 
 3 
 + 
 1 
 2 
 CSS： .fraction{ 
 display:inline-block; 
 vertical-align:middle; 
 } 
 .fraction&gt;span 
 ... 
 您不应该对表使用display属性，因为它已经具有属性display: table 。 将表包裹在div中，并将样式display: inline-block到该div。 .table-wrap { 
 display: inline-block; 
 vertical-align: middle; 
 } 
 img { 
 vertical-align: middle; 
 } 
 td { 
 padding: 10px; 
 border: solid 1px black; 
 } 
 ... 
 知道为什么firefox会改变属性的值吗？ 因为middle 是 RFC 1866(HTML 2.0) ， HTML 3.2和HTML 4中定义的正确值，而不是center 。 img元素上的align属性从未将center作为可能的值，因为center历来总是指水平对齐(浮动)，并且不能将图像浮动到线的中心。 当时的其他实现，例如IE， 确实允许center作为可能的值，具有与middle相同的含义(参见Stefan的回答)，因此我的猜测是Firefox提供互操作，同时仍然通过对值进行别名来遵守 
 ... 
 不， tfoot只能在一个表中出现一次 ，并且必须在任何tbody或tr元素之前，并且在任何thead元素之后(我已经在其他元素上进行了掩饰，请参阅链接了解详情)。 为了得到你正在谈论的效果，你可能会使用多个tbody元素，即使在语义上当然是不正确的。 或者，您可以使用多个表(嵌套或仅一个接一个)。 No, tfoot can only appear in a table once, and must be before any tbody or tr elements, and after an 
 ... 
 不使用浮动，但显示:) 测试片段在整页模式 display:inline-block; 与HTML注释抹去white-space ： .half-width-img { 
 width: 50%; 
 display: inline-block; 
 vertical-align: middle; 
 } 
 .half-width-text { 
 width: 50%; 
 height: auto; 
 display: inline-block; 
 box-sizing: bo 
 ... 
 是的，您需要从.data中移除position: absolute ，并在.bar-chart-bar中绝对位置并相应地设置z-index： .bar-chart-bar { 
 background-color: #e8e8e8; 
 display: block; 
 position: absolute; 
 width: 100%; 
 height: 20px; 
 top: 0; 
 left: 0; 
 z-index: -1; 
 } 
 https://jsfiddle.net/jam 
 ... 
 </div> 
 </div></td> 
 </tr> 
 </tbody> 
</table>

[MQzDm.jpg]: https://i.stack.imgur.com/MQzDm.jpg