【问题标题】:Extra space in table after adding link添加链接后表格中的额外空间
【发布时间】:2014-07-08 14:59:55
【问题描述】:

前段时间我遇到了一个问题,表格中的图像没有填满单元格,this post 中介绍了这个问题

但是,我现在对此进行了编辑,我需要添加指向图像和文本的链接。再一次,我遇到了同样的问题,我有多余的空格。

<table>
    <tr>
        <td width="200px" height="175px"  style="text-align: center; border: 0; background-color: #ffffff; padding: 0; margin: 0; border-collapse: collapse; "> 
            <a href="http://www.placekitten.com/"><img src="http://www.placekitten.com/200/175" style="display: block; padding: 0; border: 0;" /></a>
        </td>
    </tr>
    <tr>
        <td width="200px" height="25px"  style="text-align: center; border: 0; background-color: #535152; color: #fffdfe; padding: 0; margin: 0; border-collapse: collapse; ">
            <a href="http://www.placekitten.com/">Text</a>
        </td>
    </tr>
</table>

这是JSFiddle

这是在某处填充的情况吗?还是什么?

【问题讨论】:

    标签: html css html-table href whitespace


    【解决方案1】:

    您应该将border-collapse:collapse 移动或添加到您的表中,而不是您的 td。

    border-collapsetable 属性而不是 td 的。

    以及更多信息:border-collapse

    【讨论】:

      【解决方案2】:

      添加以下 CSS:

      Demo Fiddle

      table{
          border-collapse:collapse;
      }
      

      您还应该将样式从内联中移到样式表中。

      More on border-collapse from MDN

      border-collapse CSS 属性选择表格的边框模型。这 对表格单元格的外观和样式有很大影响。

      分隔模型是传统的 HTML 表格边框模型。 相邻的单元格都有自己独特的边界。距离 它们之间由border-spacing 属性给出。

      在折叠边框模型中,相邻的表格单元格共享边框。在 在该模型中,插图的边框样式值的行为类似于凹槽,并且 一开始就表现得像山脊。

      【讨论】:

      • 谢谢 - 仅当我使用 drupal 时,您不能加载任何额外的样式表,或在页面开头添加样式部分 :( 所以我添加了 style="border -collapse:collapse;" 到 标签
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-03-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-16
      • 1970-01-01
      • 2014-05-05
      相关资源
      最近更新 更多