HTML Table 的边界问题

Question

我有一个 table，我不想要任何内部边框，除了将 header 与线条分开的边框。

在我的 css 中，我有：

table { ...
    border-width: 2px;
    border-color: #ddd;
    border-style: solid;
}
table th {
  border-collapse: collapse;
  border-bottom: 2pt solid #830504;
  padding: 4px  8px ;
  text-align: center;
}
table tr {
  padding:4px;
}

table td {
  border-collapse: none;
  padding:4px;
}

我得到以下内容

如何去掉第 th 个底部边框左右两边的空格？

Answer 1

以此为最低基础tablecss

.tbl {
  width: 100%; /* you may change the width in % */
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: auto;
}
.tbl * {
  margin: 0;
  box-sizing: border-box;
}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 0;
  background-color: transparent;
}
thead, tbody, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  hyphens: auto;
  white-space: normal;
}
@media (max-width: 767.9px) {
  table {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

有了这个html

<div class="tbl">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 11</td>
        <td>Data 12</td>
      </tr>
      <tr>
        <td>Data 21</td>
        <td>Data 22</td>
      </tr>
    </tbody>
  </table>
</div>

使用此 css，您的 table 可响应所有屏幕尺寸，您只需为 th 和 [=13] 提供一些颜色 and/or 边框=]

Answer 2

重置默认值为 c.2px 的 border-spacing。

如果将此设置为 0，问题将得到解决。

table {
  border-width: 2px;
  border-color: #ddd;
  border-style: solid;
  margin: 1em auto;
  border-spacing: 0;
  /* this */
}

table th {
  border-collapse: collapse;
  border-bottom: 10pt solid #830504;
  padding: 8px;
  text-align: center;
}

table tr {
  padding: 8px;
}

table td {
  padding: 4px;
  border-collapse: none;
}

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table>

Answer 3

使用您提供的 CSS 只需将 border-spacing: 0; 添加到您的 table 样式

table {
            border-width: 2px;
            border-color: #ddd;
            border-style: solid;
            border-spacing: 0;

        }

您可以在此处查看它的工作情况 https://jsfiddle.net/hd60zset/3/

Answer 4

问题可能是因为您在 td 和 th 上使用了 border-collapse 而不是 table.

这是区别：

.collapse {
  border-collapse: collapse
}

table {
  border: 1px solid black;
}

th {
  border-bottom: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th>Head</th>
      <th>Header</th>
      <th>Bob</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
  </tbody>
</table>

<table class="collapse">
  <thead>
    <tr>
      <th>Head</th>
      <th>Header</th>
      <th>Bob</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
  </tbody>
</table>

HTML Table 的边界问题

Border issues on HTML Table

html

css

html-table

border