【问题标题】:Table containing images white borders (Chrome)包含图像白色边框的表格 (Chrome)
【发布时间】:2016-09-02 12:39:36
【问题描述】:

编辑:它在 Firefox 中运行良好;它似乎只发生在 chrome 上。

我正在编写一个应用程序,它需要我将图像切成小块并将它们存储在表格中。为此,我使用以下(生成的)html

.no-padding {padding: 0!important;}
<table class="table" id="game_puzzle">
    <tbody>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/0_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/1_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/2_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/3_4.png" style="width:100%">
            </td>
        </tr>
        <tr>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_0.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_1.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_2.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_3.png" style="width:100%">
            </td>
            <td class="no-padding"><img src="assets/images/kings of leon/5/4_4.png" style="width:100%">
            </td>
        </tr>
    </tbody>
</table>

上面的代码在大多数屏幕尺寸上看起来都很好,例如:

但在其他屏幕尺寸(不仅是较小的屏幕尺寸)上,它看起来像这样:

我该如何解决这个问题?

【问题讨论】:

    标签: html image css google-chrome twitter-bootstrap-3


    【解决方案1】:

    你在使用引导框架吗?如果不手动删除表格的边框,如下所示。

    table, tr, th, td {
        border: 0;
    }
    

    你仍然面临这个问题。请更新您的代码 sn-p。

    【讨论】:

    • 我正在使用引导程序,但这并没有解决它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-03
    • 2015-06-09
    • 2013-08-19
    相关资源
    最近更新 更多