应用错误收集

为什么桌子和右边的div之间有差距？

时间：2014-01-06 08:10:55

标签： html css html-table

当我显示下表时，表与div之间存在间隙。我想知道原因。

<!DOCTYPE html>
<html>
  <style>
    table {
      border-collapse:collapse;
    }
    table,td {
      border:1px solid black;
      text-align:center;
    }
  </style>
  <body>
    <div style="width:150px;border:1px solid black;">
      <table style="width:100%;">
        <tr>
          <td>value
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

3 个答案:

答案 0 :(得分：4)

浏览器会将默认margin和padding应用于元素，因此您需要重置它们。

* {
    margin: 0;
    padding: 0;
}

或者您也可以使用body

body {
    padding: 0;
    margin: 0;
}

注意：使用*选择器会将属性应用于所有元素，因此，如果您希望专门定位元素而不是考虑使用class或id代替

答案 1 :(得分：1)

“表格与 div ”之间存在差距

不在table和div之间，在div和浏览器框架之间

您可以使用margin来控制它。将margin设置为0

body{
    margin: 0;
}

答案 2 :(得分：0)

这似乎工作得很好http://jsfiddle.net/Db7Th/

如果您不喜欢边框比您想要的更厚，我只是从div中删除了边框

div { width: 150px; }

http://jsfiddle.net/Db7Th/1/