在表格单元格中放置一个 div答案

【问题标题】：Placing a div inside a table cell在表格单元格中放置一个 div
【发布时间】：2010-10-06 01:38:37
【问题描述】：

我正在尝试将 DIV 元素放入表格单元格中，其方式是 <div> 沿着单元格的所有区域传播。但是，不知什么原因，出现了一个 1px border；据我所知，它既不是表格的一部分，也不是 div 的一部分（表格没有边框、填充或间距，div 没有边距或填充）。或许你能发现我的错误？

<html>
  <head>
    <style type="text/css">
      #arrow {
        border-style: solid;
        margin: 0;
        padding: 0;
        border-width: 100px 0px 100px 50px;
        border-color: blue blue blue red;
      }

      table {
        border-collapse: collapse;
        border-style: none;
        padding: 0px;
        spacing: 0px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <td bgcolor="red">
          Blah,
        </td>
    <td>
      <div id="arrow"><!----></div>
    </td>
        <td bgcolor="blue">
          blah.
        </td>
      </tr>
    </table>

【问题讨论】：

标签： html css

【解决方案1】：

CSS 属性是“border-spacing”而不是“spacing”

此外，我使用重置表

outline: 0;

【讨论】：

谢谢！无论如何，问题仍然存在。

【解决方案2】：

<table cellspacing="0" cellpadding="0" border="0">

-- 或--

td { padding:0 }

【讨论】：

【解决方案3】：

为表格单元格添加样式：

 <html>
  <head>
    <style type="text/css">
      #arrow {
        border-style: solid;
        margin: 0;
        padding: 0;
        border-width: 100px 0px 100px 50px;
        border-color: blue blue blue red;
      }

      table {
        border-collapse: collapse;
        border-style: none;
        padding: 0px;}

        td  { padding:0; border:0;}

    </style>
  </head>

  <body>
    <table>
      <tr>
        <td bgcolor="red">
          Blah,
        </td>
    <td>
      <div id="arrow"><!----></div>
    </td>
        <td bgcolor="blue">
          blah.
        </td>
      </tr>
    </table>
</body>
</html>

【讨论】：

我给了 Abraham Pinzur 的正确答案，正如他之前的回答，但还是谢谢！
不客气。我应该提到，对你的 CSS 做的一件好事是首先重置浏览器样式。查看meyerweb.com/eric/tools/css/reset/index.html 以获得一个很好的例子。