CSS：帶有部分邊框的表格單元格中元素的大小-有解無憂

我想要的是

使用純 HTML 和 CSS，有一個表格，其中每個單元格：

有邊界
包含一個與完整單元格大小相同的元素

這樣細胞之間就沒有可見的間隙。

視覺上，我有左邊但需要右邊

CSS：帶有部分邊框的表格單元格中元素的大小

我試過的

我試過設定各種組合box-sizing和padding無濟于事。

你可以看到我在這個 JSFiddle 上的嘗試之一。

uj5u.com熱心網友回復：

您只添加padding:0了彩色單元格。由于第一個單元格仍然有填充，它正在增加所有行高。

如果添加：

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

你會注意到仍然有一條白色的 1px 線不是白色的，它是第一個單元格的邊框所占用的空間（和以前一樣，增加行高）。是否border-box在此表中使用無關緊要。所有單元格都將具有相同的高度，但顏色divs不會填充該間隙。

我建議使用outlineinsteed of border 作為解決方案：

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>

編輯：您height:100%;在彩色 div 中沒有做任何事情，因為父級沒有固定的高度。如果您不想使用，outline您可以將其高度設定divs 為 19px，這是第一個單元格的高度...設定行高度的單元格。然而，這個“解決方案”非常丑陋，如果任何單元格有 2 行文本，都將不起作用。

再次編輯...：或第三個選項，使用border將設定 aline-height為您的彩色divs. 這比之前編輯的段落干凈得多，它將作為一種padding：https : //jsfiddle.net/654gu2sf/

uj5u.com熱心網友回復：

您可以使用填充和邊框稍微“擴展”單元格著色以填充空白空間（可以看到與第一列中的邊框相對應）。

必須在表體的第一行進行調整，該行沒有給出頂部“擴展”。

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>

uj5u.com熱心網友回復：

您可以將 cellspacing 屬性添加到 table 標記以調整單元格之間的間距。

要洗掉間距，請設定 cellpacing=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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359304.html

標籤：html css html-table 边界

上一篇：如何使用CSS/Sass在字串中的“,”后添加空格

下一篇：調整視窗大小時，React組件背景影像無法正確放入容器中