6

我想创建一个 HTML 表格，其中每个单元格都是可单击的，单击一个单元格会为div单元格内的单个单元格添加边框。我希望它div的边界完全存在于td包含它的现有范围内，而根本不调整表格或其单元格的大小。我似乎无法正确地做到这一点。

这个先前的问题似乎解决了同样的问题，并指向一些关于 box-sizing CSS 选项的文章。我有一个小提琴，我试图在没有成功的情况下实现它：http: //jsfiddle.net/YsAGh/3/。

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}


<table>
  <tr>
    <td><div>1</div></td>
    <td><div>2</div></td>
    <td><div>3</div></td>
  </tr>
  ....
</table>

这是目前正在发生的事情。边界导致包含td增长以适应div的边界。

我希望在不调整 td 大小的情况下出现红色边框

如何在不影响包含表的情况下将边框添加到 div？

4

4 回答 4

1

好的，因为我在评论中看到了对我的回复的一些支持，所以在这里作为答案:)

通过向状态添加黄色“隐藏”边框来调整单元格的大小.unselected：

CSS

.unselected {
  background-color: yellow;
  border: 2px solid yellow; // Presize with this yellow border
}

div {
  ..
  line-height: 1; // Add line-height to regulate size (optional)
}

代码笔示例。

于 2013-08-26T22:47:32.750 回答
1

看看我的JSFiddle。

您需要为单元格提供宽度/高度：

td {
    // ...
    width:33.3%;
    height:33.3%;
}
于 2013-08-26T22:38:36.420 回答
1

使用插入框阴影怎么样？

.selected {
    box-shadow: inset 0px 0px 0px 2px red;
}
于 2013-08-26T22:39:48.063 回答
0

table-layout用于固定单元格的宽度并缩小padding以防止selected增加高度。

table {
    table-layout: fixed;
}
.selected {
    padding: 1px;
}

见 JSFiddle

于 2013-08-26T22:54:29.573 回答