Question

我正在尝试在div中放置表格。 Div有其自己的边框，但我也想要桌子的边框。所以我设置了td的边框，但是我发现我的桌子没有占据全部可用空间。这里有我想念的东西吗？

我正在尝试以下提及代码：

/* Styles go here */

.container{
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table{
  position: absolute;
  width: 100%;
}

.table td{
  border-bottom: 1px solid;
      padding: 0px;
    margin: 0px;
    width: 100%;
}

* {
    margin: 0px;
    padding: 0px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <table class="table">
        <tr>
          <td>First</td>
        </tr>
                <tr>
          <td>Second</td>
        </tr>
                <tr>
          <td>Third</td>
        </tr>
      </table>
    </div>
  </body>

</html>

Answer 1

HTML 5之前的版本，将以下内容作为属性添加到表中：

Site Address (URL)

供参考： https://www.w3schools.com/tags/att_table_cellpadding.asp https://www.w3schools.com/tags/att_table_cellspacing.asp

HTML5需要CSS。

cellpadding=0 cellspacing=0

所以对于您的情况：

table {border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0px;}

请参阅小提琴：https://jsfiddle.net/jennifergoncalves/gtajLmqh/5/

Answer 2

尝试将border-collapse:collapse添加到表中

像这样：

.table{
  position: absolute;
  width: 100%;
  border-collapse: collapse; 
}

这是完整的代码：

/* Styles go here */

.container{
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table{
  position: absolute;
  width: 100%;
  border-collapse: collapse; 
}

.table td{
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

* {
    margin: 0px;
    padding: 0px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <table class="table">
        <tr>
          <td>First</td>
        </tr>
                <tr>
          <td>Second</td>
        </tr>
                <tr>
          <td>Third</td>
        </tr>
      </table>
    </div>
  </body>

</html>

Answer 3

您可以通过设置以下内容来删除表格单元格周围的多余空间：

table {
  border-collapse: collapse;
}

默认情况下它设置为border-collapse: separate;，有关MDN的更多信息。

.container {
  width: 250px;
  height: 250px;
  position: relative;
  border: 1px solid black;
}

.table {
  position: absolute;
  width: 100%;
  border-collapse: collapse; /*NEW*/
}

.table td {
  border-bottom: 1px solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
}

* {
  margin: 0px;
  padding: 0px;
}

<div class="container">
  <table class="table">
    <tr>
      <td>First</td>
    </tr>
    <tr>
      <td>Second</td>
    </tr>
    <tr>
      <td>Third</td>
    </tr>
  </table>
</div>

带有边框的div内的表格未占用全部空间

3 个答案: