使用唯一的CSS打破<tr>

我正在尋找一種方法來「斷開」僅使用CSS的表格行。使用唯一的CSS打破<tr>

我想改變這一點：
one line

要這樣：
broken line

我沒有訪問HTML，但可以控制CSS。

我已經試過

但它似乎並沒有工作。

下面是一些簡單的代碼來進行測試：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 
td:nth-child(3) { 
    display: block; 
    background-color: yellow; 
} 
</style> 
</head> 

<body> 
<table border="1"> 
    <tr> 
     <td>111111</td> 
     <td>222222</td> 
     <td>333333</td> 
     <td>444444</td> 
    </tr> 
</table> 
</body> 
</html>

來源

2014-03-25 Yonat

你可以使用腳本嗎？ – mplungjan

不，只是CSS。 – Yonat

你可以給'tr'一個'width'和所有'td'的一半寬度'tr'和一個'float：left;'。這樣的事情：[JSFiddle]（http://jsfiddle.net/yfhA6/） –

如何使用inline-block具有固定width表...或者用%的width大致45%您td元素，所以你不會需要定義width爲table

Demo

在這裏，我只是把固定width表的td至display: inline-block;因爲，他們將FORC編輯以包裝到下一行。

我還使用word-wrap: break-word;屬性，以便不間斷的字符串被強制中斷。

table { 
    width: 120px; 
} 

table tr td { 
    width: 50px; 
    word-wrap: break-word; 
} 

table tr td { 
    display: inline-block; 
    margin-top: 2px; 
}

您可以使用基於%width爲好，這樣你就不需要關心單元格寬度....

你可能如果時的電池是需要vertical-align: top;與min-height沿如果單元格爲空在table

table tr td { 
    display: inline-block; 
    margin-top: 2px; 
    vertical-align: top; 
    min-height: 20px; 
}

Demo空白（僅）

只需注意inline-block會造成一些問題4px偏移，在這種情況下，僅僅分配font-size: 0;到table和重新設置font-size回你td元素，這樣你會得到電池的一致性保證金。

警告：我永遠不會推薦做這種類型的事情，所以保持這是你最後的優先事項。如果你有JavaScript控件，比考慮追加tr圍繞td

從這裏開始請忽略，如果你不能使用jQuery，說假設你有一個使用jQuery庫，你可以簡單地添加代碼段於JS文件....（添加這裏class唯一地識別元件，class還可以使用.addClass()定義一些最近的CSS選擇加入上午）

所以這裏沒有修改HTML的問題。

$('table.wrap_trs tr').unwrap(); //Remove default pre-generated tr 
var cells = $('table.wrap_trs tr td'); 
for (var i = 0; i < cells.length; i += 2) { 
    cells.slice(i, i + 2).wrapAll('<tr></tr>'); //Wrapping the tds with tr 
}

Demo

來源

2014-03-25 12:29:27

感謝您的jQuery解決方案，對於可以使用它的用戶:) – Arkana

如果你使用box-sizing：border-box（和相應的-moz-box-sizing：border-box），那麼「45％使用'width：50％'...除非你有邊距，在這種情況下，你需要手動減去這些邊距。 –

非常感謝！我設法做到這一點只有寬度和顯示：內聯塊屬性，其他似乎沒有必要。 – Yonat

您可以使用float屬性，並根據需要調整表格的邊框寬度

table{ 
     width:100%; 
    } 

td:nth-child(3) { 
    display: block; 
    background-color: yellow; 
} 


tr td { 
    float: left; 
    width: 49.5%; 
}

希望這有助於TD的寬度玩！但需要檢查瀏覽器的兼容性

來源

2014-03-25 12:28:51

謝謝。這有效，但似乎更難以適應我的需求，而不是最重要的答案。 – Yonat

我同意這是因爲1）cellpadding和cellmargin需要爲0，但你還沒有訪問表的HTML標記2）也將固定寬度在px中可能會在未來如果文本大小增加breck您的佈局 –

正確的CSS方法，簡易

這可能會幫助你，但它可能會產生變長的問題，因此，我已經使用最小寬度

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <style> 

    td:nth-child(3) { 
     display: block; 
     background-color: yellow; 
     clear:left; 
    } 
    tr{ 
    float:left; 
    } 
    td{ 
    float:left; 
    min-width:100px; //used min-width for proper alignment 
    } 
    </style> 
    </head> 

    <body> 
    <table border="1"> 
     <tr> 
      <td>111111</td> 
      <td>222222</td> 
      <td>333333</td> 
      <td>444444</td> 
     </tr> 
    </table> 
    </body> 
    </html>

來源

2014-03-25 12:29:30 sanjeev

非常好！最小寬度和清晰：左邊似乎阻止元素飛來飛去。感謝那。 – Yonat

使用唯一的CSS打破<tr>

回答

相關問題