css 带边框的div中的表不会占用全部空间

soat7uwm 于 11个月前发布在其他

关注(0)|答案(3)|浏览(123)

我试图在div中放置一个表。Div有自己的边框，但我也想要表的边框。所以我设置了td的边框，但我发现my table没有占用全部可用空间。这里是否缺少了什么？
下面是示例implementation：
我正在尝试下面提到的代码：

/* 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;
}

个字符

css

来源：https://stackoverflow.com/questions/54727176/table-inside-a-div-with-border-does-not-occupy-full-space

3条答案

按热度按时间

ergxz8rk1#

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

cellpadding=0 cellspacing=0

字符集
供参考：https://www.w3schools.com/tags/att_table_cellpadding.asp https://www.w3schools.com/tags/att_table_cellspacing.asp
HTML5需要CSS。

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

型
对于你的情况：

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

 .table td {
    border-bottom: 1px solid;
    padding: 0px;
    margin: 0px;
    width: 100%;
    padding: 0px;
 }

型
参见小提琴：https://jsfiddle.net/jennifergoncalves/gtajLmqh/5/

赞(0）回复(0）举报 11个月前

46qrfjad2#

尝试将border-collapse:collapse添加到表中：
就像这样：

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

字符集
这是一个demo。
下面是完整的代码：

/* 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>

的数据

赞(0）回复(0）举报 11个月前

zed5wv103#

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

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>

的数据

赞(0）回复(0）举报 11个月前

我来回答

css 带边框的div中的表不会占用全部空间

3条答案

相关问题

热门标签

最新问答