我發現很難在表格單元格中插入圖像。當我試圖用圖像完全填充表格單元格時，表格單元格的大小不斷增加，占據了整個頁面。 以下是我的代碼:

<div id="bar">
    <table class = "BarTable" style="width:100%;height: 100%">
      <tr>
        <td style="width: 35%">
           <img src="131AZE.jpg" style="height:100%;width: 100%">
        </td>
        <td>Everyone</td>
       </tr>
    </table>
</div>

css部分是:

#bar {
    height:45%;
    width: 100%;
}

table.BarTable,th,td {
    border:1px solid black;
    border-collapse: collapse;
    line-height: 0;
}

這是因為& lt表& gt在單元格中有一個默認的間距，如果不需要，我們需要清除它。

<table class = "BarTable" style="width:100%;height: 100%" cellpadding="0" cellspacing="0">

您可以賦予帶有圖像的單元格以下屬性:

width: 1%;
white-space: nowrap;

這將防止您的圖像像在您提供的代碼中那樣被拉伸，并且單元格將完美地包裹圖像。

完整演示

#bar {
  height: 45%;
  width: 100%;
}

table.BarTable,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.myclass {
  width: 1%;
  white-space: nowrap;
}

<div id="bar">
  <table class="BarTable" style="width:100%;height: 100%">
    <tr>
      <td class="myclass"><img src="http://rs902.pbsrc.com/albums/ac222/jvac/pattern-background.png~c200"></td>
      <td>Everyone</td>
    </tr>
  </table>
</div>

圖像和單元格的邊界之間有一點縫隙，這是問題所在嗎？只有您設置了td填充:0

#bar {
  height:45%;
  width: 100%;
}

table.BarTable,th,td {
  border:1px solid black;
  border-collapse: collapse;
  line-height: 0;
  padding:0;
}

<div id="bar">
  <table class = "BarTable" style="width:100%;height: 100%">
    <tr>
      <td style="width: 35%"><img src="http://lorempixel.com/400/200/" style="height: 100%;width: 100%"></td>
      <td>Everyone</td>
    </tr>
  </table>
</div>

這個問題是因為您將CSS樣式“height: 100%”設置為單元格和圖像的樣式屬性style = & quot身高:100%；寬度:100% & quot；。

這也許能解決問題。

<div id="bar">
  <table class="BarTable" style="width: 100%; height: 100%">
   <tr>
     <td style="width: 35%; height: 100%">
       <div style="height: 100%; display: flex; align-items: center; justify- content: center;">
        <img src="131AZE.jpg" style="max-height: 100%; max-width: 100%">
      </div>
    </td>
    <td>Everyone</td>
  </tr>
 </table>
</div>