Question

我正在尝试将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>

Answer 1

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

另外我使用

重置表格

outline: 0;

Answer 2

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

- 或 -

td { padding:0 }

Answer 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>

将div放在表格单元格内

3 个答案: