Question

我使用：nth-child（奇数/偶数）选择器为表行创建不同的背景，以提高可读性。现在我必须为我的表设置“border-spacing”或“border-color：transparent”，以通过单元格之间的空间使背景可见。问题是，不同列的水平间距应该不同 - 最后一列的间距应该大于整个表格（下面的示例中标有红色）。我怎样才能做到这一点？不知道。请帮忙。谢谢！

body
{
  background: #3a7;
}
table
{
  border-collapse: separate;
  border-spacing: 5px;
  border: 0px solid #ffffff;
  margin: 1em;
  table-layout: fixed;
}
td
{
  font-size: 1rem;
  empty-cells: show;
  /*background: white;*/
  padding: 0;
}
td.last
{
  font-size: 1rem;
  empty-cells: show;
  /*background: white;*/
  /*border-left: 20px transparent;*/
  border-left: 20px solid rgba(255,0,0,0.5);
}
tr:nth-child(odd)
{
    padding: 0px;
    margin: 0;
    background: #fff;
    color: #000;
    border: 0px solid transparent;
    overflow: visible;
}
tr:nth-child(even)
{
    padding: 0px;
    margin: 0;
    background: #000;
    color: #fff;
    border: 0px solid transparent;
    overflow: visible;
}
input
{
  border: 0px;
  outline: 0px transparent;
  background-color: transparent;
  color: inherit;
  margin: 5px;
}

<table>
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
</table>

Answer 1

这应该有效

body {
  background: #3a7;
}
td.last {
  font-size: 1rem;
  empty-cells: show;
}
tr:nth-child(odd) {
  padding: 0px;
  color: #000;
  border: 0px solid transparent;
  overflow: visible;
}
tr:nth-child(even) {
  padding: 0px;
  margin: 0;
  color: #fff;
  border: 0px solid transparent;
  overflow: visible;
}
input {
  border: 0px;
  outline: 0px transparent;
  background-color: transparent;
  color: inherit;
  margin: 5px;
}
tr:nth-child(odd) div {
  background: white;
}
tr:nth-child(even) div {
  background: black;
}
.last > div {
  margin-left: 20px;
}

<table>
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
    <tr>
        <td><div><input></div></td>
        <td><div><input></div></td>
        <td class="last"><div><input></div></td>
    </tr>    
</table>

Answer 2

另一个选项是将最后一个单元格的背景设置为none，然后为输入字段及其边框的背景着色：

https://jsfiddle.net/e1fnoa34/

Answer 3

您可以制作最后一个单元格background: none，然后将其设为padding-left: 20px。然后将单元格的内容包装在DIV或SPAN中，并将背景样式应用于内部包装器。

不太理想，但遗憾的是，您无法改变表格单元格的间距，表格单元格会忽略边距。

透明桌边界有tr背景

3 个答案: