Hideadad，但在tbody中保留其單元格寬度

我總是在thead th標籤中使用Bootstrap網格類，因此我不再需要在tbody單元格上重複類。例如：Hideadad，但在tbody中保留其單元格寬度

<table> 
    <thead> 
     <tr> 
      <th class="col-xs-2">#</th> 
      <th class="col-xs-10">Title</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td>150</td><td>Long text in here</td></tr> 
     <tr><td>150</td><td>Long text in here</td></tr> 
     <tr><td>150</td><td>Long text in here</td></tr> 
     <tr><td>150</td><td>Long text in here</td></tr> 
     <tr><td>150</td><td>Long text in here</td></tr> 
    </tbody> 
</table>

現在，我正在實現一個不應該使用表頭的場景。我在thead上嘗試了display: none和visibility: hidden，但沒有一個能夠工作。

我想我有以下解決方案（這是所有壞INMHO！）：

添加網格類每個tbody細胞（這在我的大動態表是一件壞事）
使用CSS目標單元格的索引例如：nth-child()這也是不好的，因爲重複的CSS規則，並且會在屁股上造成痛苦becase表可能會動態改變，我總是需要SCSS編譯！
給出thead a 1px高度，沒有內部文字或任何東西。

有沒有更好的解決方案？

來源

2016-12-05 Farid Rn

你不希望表頭顯示？那麼爲什麼不嘗試從你的代碼中刪除？ –

將大小添加到tbody中的第一個單元格 – Daniel

爲什麼不應該這樣做？ https://jsfiddle.net/8brbuy6v –

感謝@Johann Kratzik建議，我設法通過隱藏thead內容和thead本身使用height: 0解決我自己的問題。

thead { opacity: 0; border: 0 none; height: 0; } 
thead * { margin: 0; padding: 0; border: 0 none; height: 0px; }

來源

2016-12-06 17:52:04

像這樣的東西應該工作：

thead p { 
    margin: 0; 
    opacity: 0; 
    height: 0; 
}

當然在p僅僅是一個例子，你可以與任何其他標籤做到這一點。

更新小提琴：https://jsfiddle.net/8brbuy6v/1

來源

2016-12-05 17:25:56

Hideadad，但在tbody中保留其單元格寬度

回答

相關問題