Bootstrap 3將標籤添加到表中的單元格

這裏是fiddle

我想一個綠色標籤添加到我的第一行，但它非常難看我很差勁的設計，如果你調整瀏覽器標籤我出去。你有什麼建議讓這個更好嗎？

我這樣做是因爲我必須告訴用戶該行已在我的應用程序中編輯。

.customrow{ 
    margin-top:-11px; 
    margin-left:-43px; 
    padding-top:13px; 
    padding-bottom:20px; 
    margin-right: 5px; 
    position: absolute; 
} 

th { 
    white-space: nowrap; 
} 
td { 
    white-space: nowrap; 
}

非常感謝。

來源

2016-06-07 John

所以你要綠色標籤總是左對齊在該TD，對吧？ – Thinker

你如何從bootstrap中使用「徽章課程」！ –

只是刪除邊框半徑;它會沒事的。但設計非常主觀。 –

根據您的要求，我只是做了一個類leftrow的跨度和應用自定義CSS

.leftrow{ 
    position:absolute; 
    top:0; 
    left:0; 
    bottom:0; 
    width:30%; 
    line-height: 200%; 
    height:100%; 
    background-color:#5CB85C; 
}

Jsfiddle

希望它能幫助:)

來源

2016-06-07 09:43:59 Thinker

這很好！但是，如果我調整瀏覽器的大小，標籤上會出現問題。 – John

問題是什麼，你能解釋一下嗎？ – Thinker

如果您調整頁面的大小，您會看到的是綠色跨度變得更小，跨度內的M會超出標籤。也許我們應該修復綠色跨度的寬度 – John

你可以使用自舉類badge或只需突出顯示該單元格

我已經在此演示了我的兩個建議JsFiddle

來源

2016-06-07 09:51:21

Bootstrap 3將標籤添加到表中的單元格

回答

相關問題