消除表格的垂直邊框之間的空白s

我有一個簡歷，我試圖將MS Word翻譯成HTML和CSS，以便於維護和共享。我喜歡簡歷的風格，並希望保留它。它有一個左欄，標題爲「教育」，「體驗」等以粗體顯示，並與垂直分隔符對齊。消除表格的垂直邊框之間的空白s

在Word中，這是通過一個表格來實現的，中央邊框的樣式設置爲固定，其他邊框設置爲空白。這允許節標題與關聯的內容垂直對齊。

我試圖簡單地複製這種技術，但在Firefox和Chrome中，如果將tds的border-right屬性的列設置爲固定，則表格的垂直部分存在間隙。這種破壞效果。

我想過使用兩個div，一個是標題，另一個是內容，但硬編碼像素高度（它有自己明顯的問題），我不知道如何保留它們垂直同步。

有沒有辦法做到這一點，而不會失去保持標題及其關聯內容垂直對齊的能力？

表的代碼看起來像

<table> 
<tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr> 
<tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr> 
. 
. 
. 
</table>

來源

2012-02-25 Ben Weinstein-Raun

請解釋一下你的意思是「表格垂直分割處的間隙」，並請張貼一些代碼。 – 2012-02-25 08:24:28

你可以添加一個截圖或其他什麼，以便我們可以看到你想要的？ – 2012-02-25 08:24:51

你能不能分享一下你到目前爲止嘗試過的一些代碼，或許是你正在努力完成的一個圖像。這將有很大的幫助。例如，您可以與[JSFiddle]（http://jsfiddle.net）共享代碼。 – 2012-02-25 08:25:16

我一起去：

table { border-collapse: collapse; }

這將消除間隙，並允許表格邊框。

來源

2012-02-25 08:25:27

這實際上回答了OP的問題...... – mmcrae 2015-11-05 14:39:50

在表格中，設置border-spacing: 0;，它刪除子元素邊框之間的空格。

來源

2012-02-25 08:25:59 steveukx

lifesaver！，鬼鬼祟祟的表格樣式 – 2013-08-26 14:45:15

使用'border-collapse：collapse;'在我的表格中留下了小小的空白，但是這消除了它們。正是我在找什麼！ – Jez 2017-11-18 03:35:57

爲什麼讓你的生活變得複雜時，你可以做到以下幾點：

轉換word文件轉換成它使用HTML embed或object的標籤的pdf &主機！

編輯：http://jsfiddle.net/uday99/WzGeX/2/

來源

2012-02-25 08:30:57 uday

部分原因是我一直在丟失我的.docx文件，並被迫從不可穿透的pdf中重新創建它們。另外，我的觀衆很可能在他們的瀏覽器中沒有pdf插件。我寧願只有一個vim可編輯的文件，然後我可以快速推送到服務器，而不是每次發現輸入錯誤或獲得經驗時都要經歷整個過程。 – 2012-02-25 08:42:26

看到這個例子：你的意思是說你想要這個東西嗎？http：//jsfiddle.net/uday99/WzGeX/2/ – uday 2012-02-25 08:53:59

其實，http://jsfiddle.net/kFGmC/幾乎就是我所希望的。我只是不認爲要將''標籤當作塊元素來處理。 – 2012-02-25 09:00:58

與表配藥是更好的主意。您可以將標題轉換爲<h2>元素（或任何級別的<h>是合適的），並將其向左浮動並給文本留下足夠寬的左邊距。

有點像this jsfiddle，還是這不是你想要的？

來源

2012-02-25 08:35:26

非常好，謝謝！被告知正確的事情，它總是顯而易見的。 – 2012-02-25 08:47:58

消除表格的垂直邊框之間的空白​​s

回答

相關問題

消除表格的垂直邊框之間的空白s