CSS：带有部分边框的表格单元格中元素的大小

Question

我想要什么

使用纯 HTML 和 CSS，在每个单元格中都有一个表格：

• 有边框
• 包含一个与整个单元格大小相同的元素

使得单元格之间没有可见的间隙。

在视觉上，我有左边但需要右边

我的尝试

我尝试过设置box-sizing 和padding 的各种组合，但无济于事。

你可以在this JSFiddle看到我的尝试之一。

Answer 1

您已将padding:0 添加到仅彩色单元格中。由于第一个单元格仍然有填充，它增加了所有的行高。

如果你添加：

.rows-index {
    border: 1px solid black;
    padding: 0;
    box-sizing: border-box;
}

你会注意到仍然有一条白色的 1px 线不是白色的，它是第一个单元格的边框占用的空间（和以前一样，增加行高）。在此表中是否使用border-box 无关紧要。所有单元格的高度都相同，但有颜色的 divs 不会填补这个空白。

我建议使用outline 代替边框作为解决方案：

table  {
  border-collapse: collapse;
  border-spacing: 0;
}

.cols-index, .rows-index {
  outline: 1px solid black;
  padding: 0;
   box-sizing: border-box;
}

.table-cell {
  padding: 0;
  box-sizing: border-box;
}

.table-cell div {
  width: 100%;
  height: 100%;
  display: inline-block;
  box-sizing: inherit;
}


.purple    { background-color: purple; }
.red       { background-color: red; }
.lightblue { background-color: lightblue; }

<table xmlns="http://www.w3.org/1999/html">
    <thead>
    <tr>
      <th class="top-left-cell"></th>
      <th class="cols-index">Bish</th>
      <th class="cols-index">Bash</th>
      <th class="cols-index">Bosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td class="rows-index">First</td>
        <td class="table-cell"><div class="purple">A</div></td>
        <td class="table-cell"><div class="purple">B</div></td>
        <td class="table-cell"><div class="purple">C</div></td>
    <tr>
    <tr>
        <td class="rows-index">Second</td>
        <td class="table-cell"><div class="red">D</div></td>
        <td class="table-cell"><div class="red">E</div></td>
        <td class="table-cell"><div class="red">F</div></td>
    <tr>
    <tr>
        <td class="rows-index">Third</td>
        <td class="table-cell"><div class="lightblue">G</div></td>
        <td class="table-cell"><div class="lightblue">H</div></td>
        <td class="table-cell"><div class="lightblue">I</div></td>
    <tr>
  </tbody>
</table>

已编辑：您在彩色 div 中的 height:100%; 没有做任何事情，因为父级没有固定高度。如果您不想使用outline，您可以将divs 的高度设置为19px，这是第一个单元格的高度......设置行高的单元格。然而，这个“解决方案”非常丑陋，如果任何单元格有 2 行文本，它将无法工作。

再次编辑...：或者第三个选项，使用border 将line-height 设置为您的彩色divs。这比之前编辑的段落干净得多，它可以作为一种padding:https://jsfiddle.net/654gu2sf/

Answer 2

您可以使用填充和边框稍微“扩展”单元格的颜色以填充空白区域（可以看出对应于第一列中的边框）。

必须在没有给出顶部“扩展”的表体的第一行进行调整。

table * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.cols-index,
.rows-index {
  border: 1px solid black;
}

.table-cell {
  padding: 0;
  box-sizing: border-box;
}

.table-cell div {
  width: 100%;
  height: 100%;
  display: inline-block;
  box-sizing: inherit;
}

.table-cell div {
  padding: 1px;
  background-color: var(--col);
  border-top: var(--col) 1px solid;
  border-bottom: var(--col) 1px solid;
}

.purple {
  --col: purple;
}

.red {
  --col: red
}

.lightblue {
  --col: lightblue;
}

tbody tr:first-child td>div {
  border-top-width: 0px;
}

td {
  text-align: center;
}

.rows-index {
  text-align: right;
}

<table xmlns="http://www.w3.org/1999/html">
  <thead>
    <tr>
      <th class="top-left-cell"></th>
      <th class="cols-index">Bish</th>
      <th class="cols-index">Bash</th>
      <th class="cols-index">Bosh</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rows-index">First</td>
      <td class="table-cell">
        <div class="purple">A</div>
      </td>
      <td class="table-cell">
        <div class="purple">B</div>
      </td>
      <td class="table-cell">
        <div class="purple">C</div>
      </td>
    </tr>
    <tr>
      <td class="rows-index">Second</td>
      <td class="table-cell">
        <div class="red">D</div>
      </td>
      <td class="table-cell">
        <div class="red">E</div>
      </td>
      <td class="table-cell">
        <div class="red">F</div>
      </td>
    </tr>
    <tr>
      <td class="rows-index">Third</td>
      <td class="table-cell">
        <div class="lightblue">G</div>
      </td>
      <td class="table-cell">
        <div class="lightblue">H</div>
      </td>
      <td class="table-cell">
        <div class="lightblue">I</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

您可以将 cellspacing 属性添加到表格标签以调整单元格之间的间距。

要删除间距，请设置 cellspacing=0。

td, th {
  border: 1px solid black;
}

<table cellspacing=0>
  <tr>
    <th></th>
    <th>bish</th>
    <th>bash</th>
    <th>bosh</th>
  </tr>
  <tr>
    <td>first</td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
  </tr>
  <tr>
    <td>second</td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
  </tr>
  <tr>
    <td>third</td>
    <td>A</td>
    <td>A</td>
    <td>A</td>
  </tr>
</table>