0

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

例如：

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

这是目前的情况：

这就是我的目标：

4

3 回答 3

3

您可以通过包含冗余单元格并使用 CSSempty-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 演示

编辑

如果需要第二个边框，您可以使用该属性的double值。border-style更新了上面的 CSS 和 fiddle 以反映这一点。

于 2013-09-10T21:32:35.373 回答
1

有可能的！

通过英勇的个人努力，我仅使用您的 html 中的 css 复制了您的图形。

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

在此处输入图像描述

它是这样工作的：

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
}
于 2013-09-10T22:28:21.180 回答
0

你不能通过表格做到这一点，但可以通过 div 和 css 来实现

我仍然展示了 td with little style 可以做什么

请检查

<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>
于 2013-09-10T21:32:10.820 回答