代码之家 › 专栏 › 技术社区 › Jacob Cohen

如何将表的边框包裹在未满的行周围?

border html-table css html

0

Jacob Cohen · 技术社区 · 12 年前

我想创建一个由几行中的几个单元格组成的表,当单元格数量不能100%适应表的大小时,主表的边框将不会显示为精确的正方形,而是将其自身包裹在内容周围。

例如:

<table border = "2px">
    <tr>
        <td>1</td><td>2</td>
    </tr>
    <tr>
        <td>3</td>
     </tr>
</table>

这是目前的情况:

这就是我的目标:

3 回复 | 直到 8 年前

1

3

Boaz 12 年前

您可以通过包含多余的单元格并使用CSS隐藏它们来实现这一点 empty-cells 所有物

HTML格式

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td></td>
    </tr>
</table>

CSS格式

table td {empty-cells:hide;border:3px double;}

请注意,表本身没有给定边界,而是直接给定单元格本身。不幸的是,这与 border-collapse:collapse; 公告

看见 jsFiddle demo

编辑

如果需要第二个边界,则可以使用 double 的值 border-style 所有物更新了上面的CSS和fiddle来反映这一点。

2

1

recursive 12 年前

这是可能的!

通过英勇的个人努力,我只从你的html中使用css复制了你的图形。

http://codepen.io/anon/pen/Ekoxl

enter image description here

它是这样工作的:

table {
  display: block;
}

tr {
  display: block;
  float: left;
  clear: left;
  position: relative;
  border-style: solid;
  border-width: 3px;
  background-color: white;
  border-color: #999 #333 #333 #999;
}
tr:nth-child(n+2) {
  border-width: 0 3px 3px 3px;
}
tr:nth-child(n+2)::before {
  content: "";
  display: block;
  background-color: #fff;
  position: absolute;
  width: 100%;
  top: -3px;
  height:4px;
}
tr:nth-child(n+2)::after {
  content: "";
  display: block;
  background-color: #999;
  position: absolute;
  width: 3px;
  height: 4px;
  top: -3px;
  left: -3px;
}

td {
  display: inline-block;
  border: solid #666 1px;
  margin: 2px
}

3

0

Pranay Bhardwaj 12 年前

不能通过表来实现,但可以通过div和css来实现

尽管如此,我还是展示了一点风格的td可以做什么

请检查

<html>
<head>
<style>
td{border:2px solid black;}
</style>
</head>
<body>
<table border = "2px">
<tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="1">
<tr><td>1</td><td>2</td></tr><tr><td>3</td></tr>
</table>
</body>
</html>