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

I'm trying to format a table where I have an image in the first column and a description in the second column, but when I started replacing the placeholder images, I discovered a random gap between the image and the edge of the first column. I've tried everything I can think of to get rid of it but nothing seems to work, what am I doing wrong?

.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  width="75%" border="1">
  <tr>
    <td>
      <img src="switchon.png" />
    </td>
    <td >
       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

CodePudding user response：

It's because you're using a width: 63%; on your table1 img styles. This is saying you only want your image to use up 63% of the space available in the column, hence, the white space. Change it to 100% so it uses all the space. See the CSS changes I made below.

.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  width="75%" border="1">
  <tr>
    <td>
      <img src="https://dummyimage.com/200/000/fff" />
    </td>
    <td >
       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>