Question

我想让gif照片与具有以下css代码的表格的宽度（6英寸）相同。

    table {
      border-collapse: collapse;
    }
    td {
      border: 1px solid red;
      width: 2in;
    }
    div {
      text-indent: 2em;
      background: url(title_bg.gif) left;
      width: 6in;
    }

<!DOCTYPE html5>
<header>
  <meta charset="utf-8" />
</header>

<body>
  <br />
  <br />

  <div>result</div>

  <table>
    <tr>
      <td>
        experiment project
      </td>
      <td>
        unit
      </td>
      <td>
        value
      </td>
    </tr>
    <tr>
      <td>
        experiment project1
      </td>
      <td>
        unit
      </td>
      <td>
        value
      </td>
    </tr>
    <tr>
      <td>
        experiment project2
      </td>
      <td>
        unit
      </td>
      <td>
        value
      </td>
    </tr>
  </table>

</body>

</html>

title_bg.gif是

输出如下：

我已将图像设置为6英寸，此处为3 tds，3 * 2 = 6 为什么表格大于图像？
如何使它们宽度相等？

Answer 1

由于1px边框和默认padding 1px，如果您移除边框并填充0，则结果为 -

table
{
    border-collapse:collapse;
}
td {
/*border:1px solid red;*/
    background:#ccc;
    width:2in;
    padding:0;
}
div {
    text-indent:2em;
    background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRn211PPwWEdhmVO4YK4y5ITrIvOUW3bWKHRMsbCZYRLdbkoYPj') left ;
    width:6in;
}

<div> result   </div>

<table>
<tr>
  <td>
  experiment project
  </td>
  <td>
  unit
  </td>
  <td>
  value
  </td>
</tr>
<tr>
  <td>
  experiment project1
  </td>
  <td>
  unit
  </td>
  <td>
  value
  </td>
</tr>
<tr>
  <td>
  experiment project2
  </td>
  <td>
  unit
  </td>
  <td>
  value
  </td>
</tr>
</table>

在这种情况下，

Calc()对您有用。

table
{
    border-collapse:collapse;
}
td {
    border:1px solid red;
    background:gray;
    width:2in;
    padding:0;

}
div {
    text-indent:2em;
    background:url(yourimagepath.gif)left ;
    width:calc(6in + 4px);
}

注意： - 请参阅浏览器对calc（）的支持。

Answer 2

大多数浏览器的默认行为是从宽度计算中排除元素的边框宽度。这意味着你的td的总宽度（宽度+边框）将是2in + 2 * 1px。要解决此问题，您可以设置box-sizing: border-box; 更多信息：https://css-tricks.com/box-sizing/

Answer 3

只需给表格提供相同的div

table{
 width:6in;
}

如何让gif照片与桌子的宽度相同？

3 个答案: