CSS-用Divs替换HTML表

好吧，我试图接受这样的想法，即不应使用html表，而应使用div。 但是，我经常有类似于以下内容的代码

我希望标签对齐并且我希望控件对齐。 不使用表格怎么办？

6个解决方案

43 votes

这应该可以解决问题。

div.block{

overflow:hidden;

}

div.block label{

width:160px;

display:block;

float:left;

text-align:left;

}

div.block .input{

margin-left:4px;

float:left;

}

希望您能理解。

partoa answered 2019-11-18T16:41:58Z

25 votes

请注意，尽管不建议将表格作为页面布局的主要手段，但它们仍然有自己的位置。 在适当的时间和地点，并且可以使用表，直到某些更流行的浏览器(ahem，IE，ahem)变得更符合标准为止，表有时是解决方案的最佳途径。

KOGI answered 2019-11-18T16:42:22Z

10 votes

我到处寻找一个简单的解决方案，发现这段代码对我有用。 right div是我出于可读性考虑而保留的第三列。

这是HTML：

和CSS：

.container {

display: table;

}

.row {

display: table-row;

}

.left, .right, .middle {

display: table-cell;

padding-right: 25px;

}

.left p, .right p, .middle p {

margin: 1px 1px;

}

Wavesailor answered 2019-11-18T16:42:54Z

4 votes

您可以创建简单的基于浮点的表单，而不必丢失液体布局。 例如：

.row { clear: left; padding: 6px; }

.row label { float: left; width: 10em; }

.row .field { display: block; margin-left: 10em; }

.row .field input, .row .field select {

width: 100%;

box-sizing: border-box;

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;

}

但是，当您使用复杂的表单布局(其中有多个固定宽度和可变宽度的列的网格)时，这确实会崩溃。 在这一点上，您必须决定是否坚持使用divs并放弃液体布局，而只是将所有内容放到固定的像素位置，还是让表格来做。

就我个人而言，液体布局比用于布局表格的确切元素更重要的是可用性功能，因此我通常会使用表格。

bobince answered 2019-11-18T16:43:36Z

1 votes

基本上可以归结为使用固定宽度的页面并为这些标签和控件设置宽度。 这是实现无表布局的最常见方法。

设置宽度有很多方法。 Blueprint.css是一个非常受欢迎的CSS框架，可以帮助您设置列/宽度。

Ken Browning answered 2019-11-18T16:44:09Z

1 votes

为此有一个非常有用的在线工具，只需将表自动转换为div：

[http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/]

以及解释该视频的视频：[https://www.youtube.com/watch?v=R1ArAee6wEQ]

我每天都在使用它。 希望对您有所帮助；)

Kaszoni Ferencz answered 2019-11-18T16:44:53Z