如何在HTML表格減少行距

它似乎並沒有被不同的要求，但就是無法完成它，這是我的html頁面：http://www.xiexianhui.com/baxjoomla15/index0.html 如何在HTML表格減少行距

如果打開頁面，並檢查源代碼，你會看到：

tr.spaceUnder > td 
{ 
    padding-bottom: -0.5em; 
}

這是用來控制表中的行之間的間距。如果我需要更多的空間，它會正常工作，但如果我需要更少的空間，則無法工作。如何減少我的頁面空間？

在某些情況下，我還需要將圖像重新設置大小，我該怎麼做？

來源

2012-06-20 mdivk

padding不能爲負數。將其設置爲0，嘗試將cellpadding=0 cellspacing=0添加到您的<table>標記，例如 <table cellspacing=0 cellpadding=0>...</table> 將其應用於每個表。然後，將margin: 0; padding: 0;應用於每個表格的樣式。順便說一句，我建議你顯示td標籤沒有圖像，1像素邊框寬度，以適應他們完全一樣，你喜歡。然後，當他們很好時，你可以添加圖像。

如果希望每個圖像以適應單元格正好，你需要有自己的寬度和完全相同的針對每個小區的因爲行/列的高度/寬度得到最大元素的值在行/列中，除非您手動設置。

UPDATE 嘗試下一行適用於您的代碼：

$("img").each(function(){ this.style.padding = 0; this.style.margin = 0; }) 
$("td").each(function(){ this.style.padding = 0; this.style.margin = 0; })

這使我們有點接近預期的結果。

來源

2012-06-20 18:22:09

謝謝，它仍然顯示不正確，只是比以前少了一點空間，我已經更新了現場版本，以便您自己看看。 – mdivk

對不起，但我看不出有什麼區別......你是否遵循了我所建議的所有步驟？ –

可調整大小意味着：當用戶從較小的屏幕或更大的屏幕打開此頁面時，圖像的大小會自動調整。一個極端的例子是，如果用戶使用手機查看網頁/網站，該手機的屏幕會小得多 – mdivk

您的td元素中包含table元素。相反，具有3個表，你應該有1

要刪除表的默認間距，你應該做的：

<table cellpadding="0" cellspacing="0">

您應該從TD元素刪除表，因爲他們似乎毫無意義。就像這樣：

<table width="780" border="0" align="center" cellspacing="0" bordercolor="#000000" id="content" name="content"> 
    <tr class="spaceUnder"> 
     <td width="300"><img src="1930.png" width="300" height="130" /></td> 
     <td width="150"><img src="1931.png" width="149" height="130" /></td> 
     <td width="150"><img src="1930.png" width="149" height="130" /></td> 
     <td width="300"><img src="1651.png" width="300" height="130" /></td> 
     </tr> 

    <tr class="spaceUnder"> 
    <td width="150"><img src="1931.png" width="149" height="130" /></td> 
     <td width="150"><img src="1931.png" width="149" height="130" /></td> 
     <td width="300"><img src="1930.png" width="300" height="130" /></td> 
     <td width="150"><img src="1931.png" width="149" height="130" /></td> 
     <td width="150"><img src="1931.png" width="149" height="130" /></td> 
    </tr> 
</table>

來源

2012-06-20 18:28:18

不，我必須在一張桌子內使用兩張桌子：因爲正如你所看到的，兩行中有不同數量的房間，把它們放在一張桌子上是行不通的。 – mdivk

如何在HTML表格減少行距

回答

相關問題