每行底部的填充边框或小时

Question

是否有一种更简单的方法，没有任何类型的黑客攻击，使其在视觉上看起来像这样（从每侧填充10px的底部边框），而不必为它创建额外的行？

＆＃13;

＆＃13;

matches

＆＃13;

numb=2

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不知道你要做什么，但是这里有一个看起来就像你的例子一样的表，只有没有嵌套表。
这大致是你追求的吗？

＆＃13;

＆＃13;

table {
  border-spacing: 0 4px;
  width: 100%;
}

td {
  background: #eee;
  width:20%;
  border-bottom: 1px solid #000;
}

td:first-child {
  border-left: 10px solid #eee;
}

td:last-child {
  border-right: 10px solid #eee;
}

＆＃13;

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我真的不明白你暗示的暗示。但这是我可以完成它的一种方式。我希望你觉得它很有用。

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  background: #eee;
  padding: 0 10px;
  border-bottom: 1px solid #000;
  position: relative;
}
td:first-child {
  padding-left: 10px;
}
td:first-child:before {
  left: 0;
}
td:last-child:after {
  right: 0;
}
td:first-child:before, td:last-child:after {
  content: '';
  position: absolute;
  width: 10px;
  background: inherit;
  top: 0;
  bottom: -1px;
}
tr:last-of-type td {
  border-bottom: none;
}

＆＃13;

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您还可以使用伪元素在每侧生成空的10px宽度单元格。

＆＃13;

＆＃13;

table {
  background: lightgray;
  border-collapse: collapse;
  width:100%;
}

td {
  padding:0.5em  1em;
}

table tr td {
/* draw borders Hr like via border-style or a mix with border & shadow */
  border-top: solid 1px black;
  box-shadow: inset 0 1px 0 white
}

/* remove fake hr from first-row */
table tr:first-of-type td {
  border-top: none;
  box-shadow: 0 0
}

tr:before,
tr:after {
  content: '';
  display: table-cell;
  width: 10px;
}

＆＃13;

<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

pen to play with

second pen with padding also on td - ＆GT;小时候在tr＆＃39的bacground上画。

你正在使用伪的东西吗？

简单而复杂。

• 在表格上设置填充

＆＃13;

＆＃13;

table {
  background: lightgray;
  border-spacing: 0;
  table-layout:fixed;
  width:100%;
  padding:0 10px;
}

td {
  padding:0.5em  1em;
}

table tr td {
/* draw borders Hr like via border-style or a mix with border & shadow */
  border-top: solid 1px black;
  box-shadow: inset 0 1px 0 white
}

/* remove fake hr from first-row */
table tr:first-of-type td {
  border-top: none;
  box-shadow: 0 0
}

＆＃13;

<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

pen to play with

• 或将边框设置为表格

＆＃13;

＆＃13;

table {
  background: lightgray;
  border-spacing: 0;
  table-layout:fixed;
  width:100%;
 border-left:solid transparent 10px;
 border-right:solid transparent 10px;
}

td {
  padding:0.5em  1em;
}

table tr td {
/* draw borders Hr like via border-style or a mix with border & shadow */
  border-top: solid 1px black;
  box-shadow: inset 0 1px 0 white
}

/* remove fake hr from first-row */
table tr:first-of-type td {
  border-top: none;
  box-shadow: 0 0
}

＆＃13;

<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

• 或者您可以通过background和background-size
进行绘制

＆＃13;

＆＃13;

table {
  background: lightgray;
  border-spacing: 0;
  box-shadow: 0 0 5px;
  width: 100%;
  table-layout:fixed;
  box-sizing: border-box;
  padding: 0 10px; /* or use pseudos */
}

td {
  padding: 1em 0;
  text-align: center;
}

table tr {
  background: linear-gradient(black, black) top center no-repeat, linear-gradient(white, white) center 1px no-repeat;
  background-size: calc(100% - 20px) 1px;
  /* for a 20px padding */
}

table tr:first-of-type {
  background: none;
}


/* next is a guess */

td:first-child {
  padding-left: 10px;
  text-align: left;
}

td:last-child {
  padding-right: 10px;
  text-align: right;
}


/* see padding */

td:nth-child(odd) {
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.3);
}

＆＃13;

<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我今天正在做一些事情，并希望做到这里发布的内容。我记得我发布了什么，但决定尝试另一种方式。 我所做的是将背景颜色放在桌子上。瞄准每一行的第一个和最后一个“td”，并使它们成为一个块元素。 我能够为他们申请保证金。然后我遇到了目标“td”的问题。他们没有与其他人保持一致。我通过否定“bottom：-1px”的位置来解决这个问题。见下文。我想这是另一种方式

table {
  border-collapse: collapse;
  background: #eee;
  width: 100%;
}

td {
  padding: 0 10px;
  border-bottom: 1px solid #000;
  position: relative;
}
tr td:last-of-type, tr td:first-of-type {
    display: block;  
    bottom: -1px;
}
tr td:last-of-type {
    margin-right: 10px;
}
tr td:first-of-type {
    margin-left: 10px;
    padding-left: 0;
}
tr:last-of-type td {
  border-bottom: none;
}

<table>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
</table>

Answer 5

使用此方法，HTML代码已从31行减少到大约20行。您只需在CSS部分中定义一个表边框，并在HTML表格中多次调用它。

＆＃13;

＆＃13;

"centerLabel" : "$percentValue

＆＃13;

 

table{
width: 100%;
border-collapse: collapse;
background: #eee;
}

#border {
border-bottom:   1px   #000 solid;
border-left:  0 10px   #eee solid;
border-right: 0 10px   #eee solid ;
}

＆＃13;

＆＃13;

＆＃13;

Answer 6

您可以使用以下代码，使用较少的html和css：

<mytable>

Answer 7

＆＃13;

＆＃13;

table.rowborder{
 border-collapse:collapse;
 width: 100%; 
}
table.rowborder tr td{padding:10px 0;}
table.rowborder tr{border-bottom: 1px #000 solid;}
table.rowborder tr:last-child{border-bottom: 0px transparent solid;}

＆＃13;

<table class="rowborder">
 <tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 <td>d</td>
 <td>e</td>
</tr>
<tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 <td>d</td>
 <td>e</td>
</tr>
<tr>
 <td>a</td>
 <td>b</td>
 <td>c</td>
 <td>d</td>
 <td>e</td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;