我怎樣才能讓一個表單元格與CSS的表的全寬？

由於某種原因，我表格中第二行的單元格正在改變上面一行中單元格的寬度。我不知道爲什麼這是原因。我不想要改變第一行中第一個單元格的寬度。我已經在jsfiddle中重現了這個問題，明確了我的意思。我怎樣才能讓一個表單元格與CSS的表的全寬？

FiddleJS鏈接：

HTML：

<div class="table"> 
    <div class="row"> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    </div> 
    <div class="row"> 
    <div class="cell">this changes the width of the cell above</div> 
    </div> 
</div>

CSS：

.table { 
    display:table; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    display: table-cell; 
    padding: 5px; 
    border: 1px solid black; 
}

來源

2016-10-20 Jim Peeters

https://css-tricks.com/complete-guide-table-element/前往「連接單元」部分。這可以幫助你。 –

你可以使用內嵌塊，就像表格一樣，它們的行爲就像表格一樣..看到這裏https://jsfiddle.net/bpyrgsvc/2/ –

在'div'元素上使用'display：table'是否有原因？如果你想要一個類似桌子的樣式 - 只需使用'

'標籤。這樣你可以使用'colspan'。 – Dekel

回答

使用CSS，你可以建立使用一個表元素，然後風格您希望使用的顯示錶：block和inline塊。儘管如果你的需求確實如此簡單，那麼一個簡單的colspan就可以完成工作。

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td colspan="4"></td> 
    </tr> 
</table>

來源

2016-10-20 10:01:09

在單元格內附加表格應該說明你的問題。請參考下面的代碼片段

.table { 
 
    display:table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border-collapse:collapse 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 
.cell.p0{ 
 
    padding:0; 
 
    border:none 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
} 
 

 
.cell-full { 
 
    // full width of table 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell p0"> 
 
     <div class="table"> 
 
      <div class="row"> 
 
       <div class="cell">test</div> 
 
      <div class="cell">test</div> 
 
      <div class="cell">test</div> 
 
      <div class="cell">test</div> 
 
      <div class="cell">test</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell cell-full">this changes the width of the cell above</div> 
 
    </div> 
 
</div>

來源

2016-10-20 10:00:09

這種方式如果您的單元格內有多個不同內容的行 - 它不會像真正的表格。 – Dekel

那麼你只是把整個div放在表格div之外。 –

我看不出結果有什麼問題。在div集中顯示爲table和table-row，它表現爲表格。

要獲得您想要的結果，請關閉第一個表並開始另一個表。

<div class="table"> 
    <div class="row"> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    <div class="cell">test</div> 
    </div> 
</div> 
<div class="table"> 
    <div class="row"> 
    <div class="cell cell-full">this changes the width of the cell above</div> 
    </div> 
</div>

https://jsfiddle.net/bpyrgsvc/4/

來源

2016-10-20 10:04:29 Starx

Flexbox，就可以做到這一點：

.row { 
 
    display: flex; 
 
} 
 
.cell { 
 
    flex: 1; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell">test</div> 
 
    <div class="cell">test</div> 
 
    <div class="cell">test</div> 
 
    <div class="cell">test</div> 
 
    <div class="cell">test</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">this NO LONGER changes the width of the cell above</div> 
 
    </div> 
 
</div>

來源

2016-10-20 10:16:52

相關問題