html - 表格中图像的间距问题 - HTML 和 CSS

Question

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

前图:

后图:

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 的空间。

Answer 1

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

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