table 中的随机 space，我似乎无法更改或删除

Question

我正在尝试格式化 table，其中我在第一列中有一个图像，在第二列中有一个描述，但是当我开始替换占位符图像时，我发现了一个随机间隙图像和第一列的边缘。我已经尝试了所有我能想到的方法来摆脱它，但似乎没有任何效果，我做错了什么？

.table1 {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 0;
  padding-left: 0;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  border-collapse:separate;
  border-spacing:0;
  color: #1e919e;
}

.table1 a {
  display: block;
  width: fit-content;
  margin: 0px auto;
  padding-left: 5%;
  padding-right: 5%;
  color: #c755c5;
  text-align: center;
  text-decoration: none;
  font-family: "Sofia", sans-serif;
  font-size: 24px;
  border: 2px solid #c755c5;
  border-radius: 24px;
  background-color: transparent;
}

.table1 a:hover {
  background-color: #46464677;
  border-radius: 24px;
  border: 2px solid #823ab9;
  color: #823ab9;
}
.table1 img {
  float: left;
  width: 63%;
}

.description {
  font-size: 16px;
}

<table class="table1" width="75%" border="1">
  <tr>
    <td>
      <img src="switchon.png" />
    </td>
    <td class="description">
       Lorem ipsum dolor sit amet, <br>
       consectetur adipiscing elit. <br>
       Nunc feugiat augue ac tellus <br>
       sagittis sagittis. Fusce <br>
       faucibus nisi sit amet metus <br>
       varius euismod. Nam commodo <br>
       ligula vel arcu porttitor <br>
       laoreet. Morbi ac. <br> <be>
       <a href="crime.html">Click me</a>
     </td>
   </tr>

Image of what's happening

Answer 1

这是因为您在 table1 img 样式上使用了 width: 63%;。这就是说您只希望您的图像用完列中可用 space 的 63%，因此，白色 space。将其更改为 100%，以便它使用所有 space。请参阅我在下面所做的 CSS 更改。

.table1 {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 0;
  padding-left: 0;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  border-collapse:separate;
  border-spacing:0;
  color: #1e919e;
}

.table1 a {
  display: block;
  width: fit-content;
  margin: 0px auto;
  padding-left: 5%;
  padding-right: 5%;
  color: #c755c5;
  text-align: center;
  text-decoration: none;
  font-family: "Sofia", sans-serif;
  font-size: 24px;
  border: 2px solid #c755c5;
  border-radius: 24px;
  background-color: transparent;
}

.table1 a:hover {
  background-color: #46464677;
  border-radius: 24px;
  border: 2px solid #823ab9;
  color: #823ab9;
}
.table1 img {
  float: left;
  width: 100%;
  height: 100%;
}

td > img {
  width: 25%;
}

td.description {
  width: 75%;
}

<table class="table1" width="75%" border="1">
  <tr>
    <td>
      <img src="https://dummyimage.com/200/000/fff" />
    </td>
    <td class="description">
       Lorem ipsum dolor sit amet, <br>
       consectetur adipiscing elit. <br>
       Nunc feugiat augue ac tellus <br>
       sagittis sagittis. Fusce <br>
       faucibus nisi sit amet metus <br>
       varius euismod. Nam commodo <br>
       ligula vel arcu porttitor <br>
       laoreet. Morbi ac. <br> <be>
       <a href="crime.html">Click me</a>
     </td>
   </tr>

table 中的随机 space，我似乎无法更改或删除

Random space in table that I can't seem to change or remove

html

css

css-tables