簡體   English   中英

HTML-從表格行中刪除多余的像素

[英]HTML - remove extra pixels from table rows

大家好 我的基本HTML代碼有問題。 我的任務是將4個圖片部分合並在一起而沒有明顯的邊距。 我只允許使用不帶CSS元素的HTML代碼,並且必須使用表格。 我的問題是我無法擺脫行之間的空間。 我排除了邊框間距來自webkit瀏覽器表樣式表。 有沒有一種方法可以僅使用HTML代碼來消除此間距。 忘了圖片大小是3-200px x 200px和1- 600px x 200px

Chrome調試器顯示表格樣式表繼承了額外的4px

table {
display: table;
border-collapse: separate;
border-spacing: 2px;
-webkit-border-horizontal-spacing: 2px;
-webkit-border-vertical-spacing: 2px;
border-color: gray;
}

附言:如果我將圖片的高度設置為高度=“ 100%”,寬度設置為“ 100%”,則我無法達到我的目標,但是我不確定這是否是正確的方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>LR1</title>
</head>
<body>
<!--Using table without CSS-->
<table bgcolor="green" border="0px" cellpadding="0px" cellspacing="0px">
<tbody>
<tr>
    <td ><img src="p_01.jpg" alt="Part 1" width="200px" height="200px"></td>
    <td ><img src="p_02.jpg" alt="Part 2" width="200px" height="200px"></td>
    <td ><img src="p_03.jpg" alt="Part 3" width="200px" height="200px"></td>
</tr>
<tr >
    <td colspan="3">
        <a href="http://en.wikipedia.org/wiki/Swan" target="_blank"><img src="p_04.jpg" alt="Part 4" width="600px" height="200px">
        </a>
    </td>
</tr>
</tbody>
</table>
</body>
</html>

我發現解決問題的唯一方法是在圖像中添加style =“ display:block”。 顯示:默認情況下,內聯會為單元格添加額外的空間。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM