放置在表格中的图像的间距问题 - HTML 和 CSS答案

【问题标题】：Spacing issue with image placed in table - HTML and CSS放置在表格中的图像的间距问题 - HTML 和 CSS
【发布时间】：2022-02-12 04:20:12
【问题描述】：

我正在为我的网站构建一个表格，并尝试在数据单元格中放置一个徽标。问题是每当我添加图片时，边距变得非常奇怪，我无法弄清楚为什么要添加间距。我试图删除图像上的填充和边距，以及单元格本身，但没有任何修复。

图片前：

图片后：

HTML：

<table class="table">
            <thead class="tablehead">
                <tr>
                    <th>Language</th>
                    <th>Year Initiated</th>
                    <th>Projects</th>
                </tr>
            </thead>
            <tbody class="tablebody">
                <tr>
                    <td><img src = "images/Java_Logo.png" class="tableimage"></td>
                    <td>2015</td>
                    <td>ENTER LINK</td>
                </tr>
                <tr>
                    <td>C#</td>
                    <td>2016</td>
                    <td>ENTER LINK</td>
                </tr>
                <tr>
                    <td>Python</td>
                    <td>2018</td>
                    <td>ENTER LINK</td>
                </tr>
                <tr>
                    <td>HTML and CSS</td>
                    <td>2018</td>
                    <td>ENTER LINK</td>
                </tr>
            </tbody>
        </table>

CSS：

    .table{

    margin: auto;

}

.tablehead{

    font-family: permanent marker;
    font-size: 24px;

}

.tablebody{

    font-family: body;
    font-size: 20px;

}

.tableimage{

    width: 15%;
    padding:0px;
    margin: 0px;

}

th, td{

    border-bottom: 1px rgb(146, 40, 40) solid;
    padding: 10px;
    margin: 0;

}

我也已经尝试了多个不同的图像，所以这似乎不是问题。我希望所有三列各占用 1/3 的空间。

【问题讨论】：

该行扩展到图像的高度。您是要缩小图像以使该行与之前的大小相同，还是要放大其他三行以使其与 Java 行的新大小相匹配？
我想缩小图像所在的单元格以匹配其他两列。当我在浏览器中使用检查元素时，图片占据了一个小矩形，右侧有很大的空间，我想摆脱它。我只是不知道为什么会有空间，它似乎不是我设置的边距或填充。
哦，你是说水平空间。我只是在看垂直空间。那讲得通;我现在看到了 :) 虽然运行您的代码不会对我造成同样的问题 - 问题必须在您提供的 HTML / CSS 之外。您是否使用任何框架或任何东西？
没有框架或其他任何东西，只有准系统 html 和 css

标签： html css

【解决方案1】：

另一个选项是使用它，它会改变整个表格的行为。（设置您喜欢的宽度，或者什么都不设置）：

table {table-layout: fixed; width: 50%;}

【讨论】：

【解决方案2】：

您只需要指定表格单元格的宽度。尝试将其添加到您的 CSS：

th, td {
    width: 33%;
}

【讨论】：

【解决方案3】：

表格必须有其他影响它的 css。当我将您的代码放入 JSFiddle 时，它似乎按照您想要的方式工作。参见示例：https://jsfiddle.net/ruben/xg2joc1y/5/

您可以尝试在图片中添加一些 CSS：

.table img {
  display: inline;
}

【讨论】：