做一個充當<tr>（錶行）INSIDE傘<tr>

變化已經問過，但我找不到我的具體問題的答案。這裏有：做一個充當<tr>（錶行）INSIDE傘<tr>

我有一個table，我需要能夠使用ListJS等JavaScript插件進行排序。這並不重要，但爲了能夠我需要 a 單<tr>PER上市。

所以我的表如下所示：

<table> 
    <tr> 
    <td class="line1">line 1</td> 
    <td class="line1">line 1</td> 
    <td class="line1">line 1</td> 
    <td class="line1">line 1</td> 
    <td class="line2">line 2</td> 
    <td class="line3">line 3</td> 
    </tr> 
</table>

http://jsfiddle.net/t6zadmhd/

我需要的是<td class="line2">和<td class="line3">放置<td>的「第一線」的下方，使他們充當第二和第三個表-行。

我試過display:block;和display:table-row;上.line2和.line3，但正如你所看到的我沒有得到預期的結果。

這可能嗎？

編輯：這是我預期的設計輸出：http://jsfiddle.net/op5cb4qt/

來源

2017-02-11 Trace DeCoy

可能您發佈的預期輸出design..its不知道你要 – affaz

知道是什麼，請參見http：//的jsfiddle。net/op5cb4qt/ –

的想法的確是重置display，您可以使用Flex boxmodel完全打破table-layout：

body { 
 
    color: #fff; 
 
} 
 
table, 
 
.line2, 
 
.line3 { 
 
    width: 100%; 
 
} 
 
tr { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
td { 
 
    display:block;/* IE fix */ 
 
    margin: 1px; 
 
} 
 
.line1 { 
 
    background: red; 
 
    flex: 1; 
 
} 
 
.line2, 
 
.line3 { 
 
    background: blue; 
 
} 
 
.line3 { 
 
    background: green; 
 
}

<table> 
 
    <tr> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line2">line 2</td> 
 
    <td class="line3">line 3</td> 
 
    </tr> 
 
</table>

http://jsfiddle.net/t6zadmhd/1/

但是，爲什麼不使用常規標籤如果不是表格？

與柔性走得更遠，你可以閱讀https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-02-11 13:05:09

嘿，那看起來就像我描繪的那樣！所以這是使用Flexbox？有趣。回覆：普通標籤 - 你的意思是使用另一個？這是不可能的，因爲js排序約束。 –

@TraceDeCoy是的，flexbox是安靜的功能強大，易於爲現在的瀏覽器設置。請參閱https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

@TraceDeCoy否我的意思是div，footer，arrticle，section或p。無論如何反映內容，如果這不是一個真正的表 –

tr{display:flex;flex-wrap:wrap;} 
 
.line2, .line3{width:100%;}

<table> 
 
    <tr> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line2">line 2</td> 
 
    <td class="line3">line 3</td> 
 
    </tr> 
 
</table>

來源

2017-02-11 13:07:47

如何在使用flex時指定每個的寬度？ –

你可以設置'.line1：width：100px;'它增加了所有的表格寬度。但是，如果您設置動態寬度'.line1：width：24％;'，它不會更改表格寬度。你將它設置爲'25％'第四個td'.line1'換行到下一行，因爲它們有邊框，'4 * 25％+ 8px'大於'100％' –

如果我在每個，我還需要「flex：1」嗎？在他們身上呢？ –

你可以做到這一點只用display: block;但你必須設置％的寬度。

td { 
    padding: 0; 
    margin: 0; 
} 

.line1 { 
    background: red; 
    float: left; 
    display: block; 
    width: 25%; 
} 

.line2 { 
    background: blue; 
    float: left; 
    display: block; 
    width: 100%; 
} 

.line3 { 
    float: left; 
    background: green; 
    display: block; 
    width: 100%; 
}

來源

2017-02-11 13:17:47

太簡單了。謝謝！ –

有幾種方法可以實現這一點。 Flex是最方便的，您不需要爲此使用表格。然而，如果你有任何舊的瀏覽器需求flex可能會限制你，但浮動可以完成你所要求的，而不使用flex。

http://jsfiddle.net/eeb03gts/2/

body { 
 
    color: #fff; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
table, tr, td { 
 
    box-sizing: border-box; 
 
} 
 
tr { 
 
    clear:both; 
 
} 
 
.line1 { 
 
    background: #f00; 
 
    width: 25%; 
 
    float: left; 
 
} 
 
.line2 { 
 
    background: #00f; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.line3 { 
 
    background: #008000; 
 
    float: left; 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line1">line 1</td> 
 
    <td class="line2">line 2</td> 
 
    <td class="line3">line 3</td> 
 
    </tr> 
 
</table>

來源

2017-02-11 13:21:17 Vince

做一個​​充當<tr>（錶行）INSIDE傘<tr>

回答

相關問題

做一個充當<tr>（錶行）INSIDE傘<tr>