刪除顯示之間的空間：表格單元格

我有一個div，即display:table; - 在div裏面有兩個display:table-cell。刪除顯示之間的空間：表格單元格

一個表細胞是跨距保持和IMG，另一個是跨距保持文本，

出於某種原因有兩個display:table-cell，我不希望之間的空間。

我該如何讓表格單元彼此相鄰？

這裏是我的html：

<div class="statusCommentUser"> 
    <span><img src="/Content/Images/contactDemo_small_image.png" class="SmallUserImg"></span> 
    <span>Sounds great, man!</span> 
</div>

這裏是我的CSS：

.statusCommentUser { 
    width:450px; 
    height:50px; 
    display:table; 
} 

.statusCommentUser span { 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2013-10-22 eyal halperin

不知道你問什麼。細胞彼此相鄰。 – Ruddy

你可以製作一個JSFiddle嗎？ – Grevling

當你將CSS規則display:table-cell的任何元素，它表現爲一些表的任何td元素。因此，在這種情況下，只有在您未指定此td的寬度時，纔會根據父寬度和同一行中其他tds的數量自動調整自身。

這就是爲什麼你的跨度和TDs正在採取這種寬度。只需爲第一個寬度分配一個寬度，它應該可以解決您的問題。

即嘗試添加此類

.statusCommentUser span:first-child{ 
    width:50px; 
}

看到demo

而且，如果所有你想要的是定位你的形象跨度和文本跨度水平排列，可以通過許多其他方式做到這一點即改變你的CSS類這樣的：

.statusCommentUser { 
    width:450px; 
    height:50px; 
} 
.statusCommentUser span { 
    float:left; 
} 
.statusCommentUser span:last-child{ 
    position:relative; 
    top:40px; 
}

看到這個demo

來源

2013-10-22 07:17:25

See Demo Here

只需添加類包含圖像的span，然後設置width

HTML

<div class="statusCommentUser"> 
    <span class="user"><img src="http://placehold.it/30x30/" class="SmallUserImg"></span> 
    <span>Sounds great, man!</span> 
</div>

CSS

span.user { 
    width: 35px; 
}

來源

2013-10-22 07:08:30

如果div被表現得象一個表，嘗試添加這.statusCommentUser：

border-collapse: collapse;

這個CSS是用來清除細胞之間的間距在一張桌子裏。

來源

2013-10-22 07:08:45

此CSS不用於刪除單元格之間的間距，它用於合併表格中不同單元格的各個邊界。 -1 –

是的，合併邊界，換句話說：刪除邊界之間的間距，即刪除單元格之間的間距。即使這些單元格沒有任何邊框。 –

該空格來自兩個<span>之間的換行符和縮進。

試試這個：

<span><img width="100" height="100" class="SmallUserImg"></span><span>Sounds great, man!</span>

來源

2013-10-22 07:09:28 Atle

這個怎麼樣：

.statusCommentUser img 
{ 
    width: 100%; 
    height: 100%; 
    float: left; 
}

圖像將成爲你的總規模。此外，您的圖片必須浮動才能放置在單元格中（例如，圖片不在單元格的中間）。

爲防止圖像拉伸，可以將圖像範圍的寬度設置爲靜態。或者您可以根據圖像大小自動調整單元格。但是，您將不得不刪除您的div表格的靜態寬度。

用於虛擬圖像^^ 和Manish米什拉的圖像

jsFiddle

來源

2013-10-22 07:17:47 nkmol

我面臨同樣的問題，並能夠通過在顯示添加屬性來解決：表電池元件

border-spacing: 0;

希望它解決了那些仍在尋找的人

來源

2017-05-11 14:00:04

刪除顯示之間的空間：表格單元格

回答

相關問題