CSS-用Divs替換HTML表

好吧，我試圖接受這樣的想法，即不應使用html表，而應使用div。 但是，我經常有類似于以下內容的代碼

First Name:
Last Name:
Address:	NY CA	USA CAN

我希望標簽對齊并且我希望控件對齊。 不使用表格怎么辦？

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;

}

First field

Second field

希望您能理解。

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

25 votes

請注意，盡管不建議將表格作為頁面布局的主要手段，但它們仍然有自己的位置。 在適當的時間和地點，并且可以使用表，直到某些更流行的瀏覽器(ahem，IE，ahem)變得更符合標準為止，表有時是解決方案的最佳途徑。

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

10 votes

我到處尋找一個簡單的解決方案，發現這段代碼對我有用。 right div是我出于可讀性考慮而保留的第三列。

這是HTML：

PHONE & FAX:

+43 99 554 28 53

Cellphone Gert:

+43 99 302 52 32

Cellphone Petra:

+43 99 739 38 84

和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;

}

First name

State

NY

但是，當您使用復雜的表單布局(其中有多個固定寬度和可變寬度的列的網格)時，這確實會崩潰。 在這一點上，您必須決定是否堅持使用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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML可以替代CSS的所有功能,CSS-用Divs替换HTML表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。