边框底部的表格比全宽度短

Question

我有一张表需要看起来像附图。

注意Name下的边框不像行高亮那样延伸全长。我无法弄清楚的是如何使边框变短并将行背景延伸到包含div的边缘。目前我正在对第一个和最后一个<td>单元格应用填充以获得填充。我最初的尝试是将填充应用于<tr>并将边框应用于表头中的<th>，但似乎<tr>即使使用{border-collapse: collapse;也不进行填充1}}设置。

这是问题的附加问题。红色边框需要与td内容对齐。

https://jsfiddle.net/0vhqg4xe

任何想法都会受到赞赏。

Answer 1

您可以在<span>中的每个文字周围添加<th>标记，并将边框应用于该标记。

<th><span>Test 1</span></th>
<th><span>Test 2</span></th>

thead th span {
  display: block;
  border-bottom: 1px solid red;
}

＆＃13;

＆＃13;

.wrapper {
  background: blue;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  border: 0;
}
tr {
  border: 0;
}
thead th span {
  display: block;
  border-bottom: 1px solid red;
}
tr.highlight {
  background: green;
}
tr > td:first-child,
th:first-child {
  padding-left: 20px;
}
tr > td:last-child,
th:last-child {
  padding-right: 20px;
}

＆＃13;

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th><span>Test 1</span>
        </th>
        <th><span>Test 2</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="highlight">
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

或者，使用伪元素作为边框，因此您不需要更改HTML。

thead tr th {
  position: relative;
}
thead tr th:before {
  content: "";
  display: block;
  height: 1px;
  overflow: hidden;
  background: red;
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
}
thead tr th:last-child:before {
  left: 0;
  right: 20px;
}

＆＃13;

＆＃13;

.wrapper {
  background: blue;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  border: 0;
}
tr {
  border: 0;
}
thead tr th {
  position: relative;
}
thead tr th:before {
  content: "";
  display: block;
  height: 1px;
  overflow: hidden;
  background: red;
  position: absolute;
  left: 20px;
  right: 0;
  bottom: 0;
}
thead tr th:last-child:before {
  left: 0;
  right: 20px;
}
tr.highlight {
  background: green;
}
tr > td:first-child,
th:first-child {
  padding-left: 20px;
}
tr > td:last-child,
th:last-child {
  padding-right: 20px;
}

＆＃13;

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>Test 1</th>
        <th>Test 2</th>
      </tr>
    </thead>
    <tbody>
      <tr class="highlight">
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.border-table .bordered {
  position: relative;
  background: red;
}
.border-table .bordered:before,
.border-table .bordered:after {
   width: 90%;
   left: 5%;
   height: 1px;
   background: blue;
   content: '';
   position: absolute;
}
.border-table .bordered:before {
  top: 0; 
}
.border-table .bordered:after {
  bottom: 0;
}
<div class="wrapper border-table">
  <table>
    <thead>
      <tr>
        <th class="bordered">Test 1</th>
        <th class="bordered">Test 2</th>
      </tr>
    </thead>
    <tbody>
      <tr class="highlight">
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
      <tr>
        <td>Some Text</td>
        <td>Some Text</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

我最近已经解决了这个问题，以防将来有人碰到这个帖子。

这是结果的图片...

...这是代码...

<style>

* {
   font-family: sans-serif; 
}

/* table wrapper for continuous border */
.table {
    width: 500px;
    border: solid 1px rgb(221,221,221);
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
}

/* table border */
.table table {
    width: 100%;
    border-collapse: collapse; /* removes gap between cells */
}

.table thead th {
    font-weight: bold;
    background-color: rgb(245,245,245);
    border-bottom: solid 1px rgb(221, 221, 221);
}

/* cell padding */
.table th, td {
    padding: 10px;
}

/* add row hover */
.table tr:hover td {
    background-color: rgb(245,245,245);
}

/* create 1px gap in table for line */
.table tr.line-break td {
    position: relative;
    top: 1px;
}

/* create the line */
.table tr.line-break td:after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0px;
    height: 1px;
    width: 100%;
    background-color: rgb(235,235,235);
}

/* reduce width of line for first and last cells, by cell padding amount */
.table tr.line-break td:first-child:after,
.table tr.line-break td:last-child:after {
    width: calc(100% - 10px);
}

/* pull line on first cell to the right */
.table tr.line-break td:first-child:after {
    right: 0px;
    left: auto;
}

</style>

<div class="table">
    <table>
        <thead>        
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Gender</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>Smith</td>
                <td>Male</td>
                <td>35</td>
            </tr>
            <tr class="line-break">
                <td>Steve</td>
                <td>Cook</td>
                <td>Male</td>
                <td>27</td>
            </tr>
            <tr>
                <td>Susan</td>
                <td>Walters</td>
                <td>Female</td>
                <td>34</td>
            </tr>
        </tbody>
    </table>
</div>

...这是我为工作解决方案制作的CodePen的链接。

https://codepen.io/latchy/pen/wvwoxXe

将表格包裹在DIV中的原因是，当我将表格行向下推1px以允许该行的高度时，侧面的边框不会中断。它还可以轻松地将边界半径应用于表格。

希望这对某人有帮助！

-闩锁