圖像的表

內填充怪我已經創建了一個作業下面的代碼的HTML和CSS：圖像的表

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    border-color: black; 
 
} 
 

 
th { 
 
    border: 1px solid black; 
 
    color: white; 
 
} 
 

 
td { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 20px; 
 
    padding: 20px 5px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    overflow: hidden; 
 
} 
 

 
th { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    padding: 20px 5px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    overflow: hidden; 
 
} 
 

 
th { 
 
    background-color: #656565; 
 
    text-align: center; 
 
    vertical-align: top 
 
} 
 

 
.name { 
 
    background-color: #9b9b9b; 
 
    text-align: center; 
 
    vertical-align: top 
 
} 
 

 
.ort { 
 
    background-color: #c0c0c0; 
 
    vertical-align: top 
 
} 
 

 
.image { 
 
    background-color: #c0c0c0; 
 
    text-align: center; 
 
    vertical-align: top; 
 
} 
 

 
.oh { 
 
    text-align: left; 
 
} 
 

 
.age { 
 
    background-color: #d6d6d6; 
 
    text-align: right; 
 
    vertical-align: top 
 
} 
 

 
table { 
 
    width: 70%; 
 
} 
 

 
.hl { 
 
    border: solid red 5px; 
 
}

<!DOCTYPE html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>People</title> 
 
</head> 
 

 
<body> 
 

 
    <table align=center> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th colspan="2" class="oh">Living in</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="name">Frank</td> 
 
     <td class="ort">Europe</td> 
 
     <td class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/70x70.jpg"></td> 
 
     <td class="age">24</td> 
 
    </tr> 
 
    <tr class="hl"> 
 
     <td class="name">Carl</td> 
 
     <td class="ort">Canada</td> 
 
     <td class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/70x70.jpg"></td> 
 
     <td class="age">22</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="name">Fred</td> 
 
     <td class="ort">Russia</td> 
 
     <td class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/70x70.jpg"></td> 
 
     <td class="age">17</td> 
 
    </tr> 
 
    </table> 
 
</body>

我使用的圖片是70x70px大雖然表不斷增加在它旁邊有一大堆填充物。我希望圖像顯示在一個更小的單元格中，每個單元格上都有相同數量的填充。 TL; DR我希望細胞的寬度和高度相等。

注意：您需要以全屏模式打開代碼片段才能看到問題，表格需要覆蓋整個頁面。

佔位符圖像：© by Jeff Dean

來源

2017-10-17 LW001

td.image { 
    width: 1%; 
    padding: 20px; 
}

UPDATE：（以下@FluffyKitten諮詢）

你與引起錯過尺寸規格圖像擴增的細胞的問題。在這種情況下，瀏覽器會自動平衡表格單元大小，並在非常寬的表格上生成表格單元格大小，使其更大（因爲它沒有限制）。設置非常窄的寬度（在這種情況下爲1％）會縮小單元格，但仍然可以通過單元格的內容進行擴展（本例中爲圖像）。

填充值的定義僅僅是爲了實現您的要求的目標，使其具有等於單元格的間距，而td的padding: 20px 5px。

來源

2017-10-17 18:52:15 Flying

謝謝，這工作。我會在幾分鐘內接受答案。 – LW001

請回顧[我如何寫出一個好答案]（https://stackoverflow.com/help/how-to-answer）。不接受代碼的答案是不鼓勵的，因爲他們沒有解釋他們如何解決問題中的問題。你應該更新你的答案，以解釋這是什麼以及如何解決問題。 - 這不僅有助於OP，也有助於解決其他類似問題。 – FluffyKitten

@FluffyKitten我已經更新了答案，希望現在好一點 – Flying

回答

相關問題