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

最新推荐文章于 2024-08-19 10:00:49 发布

weixin_39977934

最新推荐文章于 2024-08-19 10:00:49 发布

阅读量545

点赞数

文章标签： html5表格顶端对齐

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

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

Back

value="${placeholder.placeholder_id}">Delete

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

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

我该怎么办？

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.

What should I do?

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

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

最满意答案

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

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

Back

Delete

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

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

Back

Delete

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

相关问答

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

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;

}

Text Not In Middle Of Cell

...

UITableView是UIScrollView的子类，因此您可以使用： scrollRectToVisible: animated:

并自己计算CGRect，这样你就可以获得比使用更多的控制： scrollToRowAtIndexPath

UITableView is a subclass of UIScrollView so you can use: scrollRectToVisible: animated:

...

你为什么用桌子？我认为这更好： HTML：

CSS： .fraction{

display:inline-block;

vertical-align:middle;

}

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

...