Question

在我将表格中的图像链接到图像库之前，图像之间没有空格。我能够用font-size:0;删除垂直空格，但我似乎找不到删除水平空格的方法..

`

    <div class="center">        
            <table id="Table_01" width="960" height="603" border="0" cellpadding="0" cellspacing="0">
                <tr><!--
                 --><td><ul class="gallery clearfix"></ul><!--
                    --> <div class="c1"><!--
                        --> <ul class="gallery clearfix"><!--
                        -->     <a href="img/photos/c1/c_1.jpg" rel="prettyPhoto [ch1]"><img src="img/maison/maison_01.png" width="644" height="253" alt=""></a><!--
                        --> </ul><!--
                    --> </div>
                        <div class="c1">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c1/c_2.jpg" rel="prettyPhoto [ch1]"></a>
                            </ul>
                        </div>
                        <div class="c1">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c1/c_3.jpg" rel="prettyPhoto [ch1]"></a>
                            </ul>
                        </div>
                        <div class="c1">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c1/s_1.jpg" rel="prettyPhoto [ch1]"></a>
                            </ul>
                        </div>
                        <div class="c1">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c1/s_2.jpg" rel="prettyPhoto [ch1]"></a>
                            </ul>
                        </div>
                    </td><!--
                 --><td><!--
                    --> <div class="c2"><!--
                        --> <ul class="gallery clearfix"><!--
                        -->     <a href="img/photos/c2/c_1.jpg" rel="prettyPhoto [ch2]"><img src="img/maison/maison_02.png" width="316" height="253" alt=""></a><!--
                        --> </ul><!--
                    --> </div>
                        <div class="c2">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c2/c_2.jpg" rel="prettyPhoto [ch2]"></a>
                            </ul>
                        </div>
                        <div class="c2">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c2/c_3.jpg" rel="prettyPhoto [ch2]"></a>
                            </ul>
                        </div>
                        <div class="c2">
                            <ul class="gallery clearfix">
                                <a href="img/photos/c2/c_4.jpg" rel="prettyPhoto [ch2]"></a>
                            </ul>
                        </div>
                    </td><!--
             --></tr><!--
             --><tr><!--
                --> <td><!--
                    --> <div class="bu"><!--
                        --> <ul class="gallery clearfix"><!--
                        -->     <a href="img/photos/bu/bu_1.jpg" rel="prettyPhoto [bu1]"><img src="img/maison/maison_03.png" width="644" height="121" alt=""></a><!--
                        --> </ul><!--
                    --> </div><!--
                --> </td><!--
                 --><td rowspan="2">
                        <div class="sal">
                            <ul class="gallery clearfix">
                                <a href="img/photos/sal/b_1.jpg" rel="prettyPhoto [sal]"><img src="img/maison/maison_04.png" width="316" height="350" alt=""></a>
                            </ul>
                        </div>
                        <div class="sal">
                            <ul class="gallery clearfix">
                                <a href="img/photos/sal/b_2.jpg" rel="prettyPhoto [sal]"></a>
                            </ul>
                        </div>
                        <div class="sal">
                            <ul class="gallery clearfix">
                                <a href="img/photos/sal/b_3.jpg" rel="prettyPhoto [sal]"></a>
                            </ul>
                        </div>
                    </td><!--
             --></tr><!--
             --><tr><!--
                 --><td><!--
                    --> <div class="sej"><!--
                        --> <ul class="gallery clearfix"><!--
                        -->     <a href="img/photos/sej/s_1.jpg" rel="prettyPhoto [sej]"><img src="img/maison/maison_05.png" width="644" height="229" alt=""></a><!--
                        --> </ul><!--
                    --> </div>
                        <div class="sej">
                            <ul class="gallery clearfix">
                                <a href="img/photos/sej/s_2.jpg" rel="prettyPhoto [sej]"></a>
                            </ul>
                        </div>
                        <div class="sej">
                            <ul class="gallery clearfix">
                                <a href="img/photos/sej/s_3.jpg" rel="prettyPhoto [sej]"></a>
                            </ul>
                        </div>
                        <div class="sej">
                            <ul class="gallery clearfix">
                                <a href="img/photos/sej/s_4.jpg" rel="prettyPhoto [sej]"></a>
                            </ul>
                        </div>
                    </td>
                </tr><!--
        --> </table>
        </div>

</div>

<!-- PrettyPhoto SCRIPT -->
<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("area[rel^='prettyPhoto']").prettyPhoto();

            $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',slideshow:3000, autoplay_slideshow: false});
            $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

            $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
                custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
                changepicturecallback: function(){ initialize(); }
            });

            $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
                custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
                changepicturecallback: function(){ _bsap.exec(); }
            });
        });
</script>

CSS：

.center {display: block;font-size: 0;max-width:1100px;margin-top: -30px;margin-left:auto;margin-right:auto;}

结果：http://www.simoncokes.ovh/mais.html

请原谅我这个烂摊子，我只是一个初学者/ noob /学习者！

Answer 1

试试这个：

td, th {
  border: 0px;
  padding: 0px;
}

tr {
  border: 0px;
  padding: 0px;
  margin: 0px;
}

img {
  display: block;
}

另外，使用以下属性设置表：

cellspacing = "0"  cellpadding = "0"

应该有效

如何删除表中图像之间的水平空间

1 个答案: