我正在嘗試格式化一個表格，其中第一列中有一個影像，第二列中有一個描述，但是當我開始替換占位符影像時，我發現影像和第一列的邊緣之間存在隨機間隙。我已經嘗試了所有我能想到的方法來擺脫它，但似乎沒有任何效果，我做錯了什么？
.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>正在發生的事情的圖片
uj5u.com熱心網友回復：
這是因為您在樣式width: 63%;上使用了 a table1 img。這就是說您只希望您的影像用完列63%中的可用空間，即空白空間。將其更改為 100%，以便使用所有空間。請參閱我在下面所做的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392783.html
標籤：html css css-tables