Question

我正在使用CSS：

*{margin:0; padding:0;}

table {
    font-size:0.75em;
    margin:300px auto;              
    font-family:'Lucida Grande',sans-serif;
    border-collapse:collapse;
}

thead th a {
    color:#fff;
    width:127px;
    height:15px;          
    display:block;
    padding:5px 7px;
    text-align:left;
    font-weight:normal;
    text-decoration:none;          
    background:url('files/images/but.png')  no-repeat;
}


td{
    font-size:1em;
    padding:6px 7px;
    border-left:1px solid black;
    border-right:1px solid #9b9b8b;
}

.contrast{background-color:#ececd8;}

HTML：

<table>
    <thead >
    <tr>
    <th><a href="#">cell</a></th>
    <th><a href="#">cell</a></th>
    <th><a href="#">cell</a></th>
    <th><a href="#">cell</a></th>
    </tr>
</thead>
<tbody>
   <tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
   <tr class="contrast">
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
   <tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
   <tr class="contrast">
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
</tbody>
</table>

然而我的......

td {
    border-left:1px solid black;
    border-right:1px solid #9b9b8b;
}

...不适用于我的愿望，只有一个边框是可见的，可能是因为边界崩溃：崩溃，我也可以应用一些有用的规则，因为单元格是内联的。我将不胜感激任何解决方案。

BR，Stephan

Answer 1

非常常见的解决方案是用这样的背景颜色模拟边框：

的CSS：

<style type="text/css">
  table {
    background: red;
    border: 1px solid red;
  }
  table td, table th {
    background: white;
  }
</style>

HTML：

<table cellpadding="0" cellspacing="1">
  <tr>
    <td> .... </td>
  </tr>
</table>

Answer 2

10x找到新的东西很有帮助，但这不是我问题的解决方案。我已经修复了我的自我，关键是没有使用border-collapse:collapse;，但是border-spacing: 0 0;祝你一切顺利，我赞成你的合作

表边界合并问题

2 个答案: