代码之家 › 专栏 › 技术社区 › Prasanna

如何仅给THAD指定单元格间距?

css html

Prasanna · 技术社区 · 7 年前

我想做一个表格,这样只有在 thead 节,而不在 tbody

我可以这样做两张桌子

table.table1 {
  border-spacing: 10px;
  border-collapse: separate;
  border: solid;
}

table.table1 th {
  border: solid;
}

table.table2 {
  border-spacing: 10px;
  border-collapse: collapse;
  border: solid;
}
table.table2 td {
  border: solid;
}

<table class="table1">
  <thead>
   <tr> 
     <th> col1 </th>
     <th> col2 </th>
     <th> col3 </th>
     <th> col4 </th>     
   </tr>
  </thead>
</table>

<table class="table2">
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

但是宽度可能不匹配,然后我必须编写一个与宽度匹配的js脚本,这很乏味,我认为这样做不正确。

我想要的是这样的东西

请帮忙

5 回复 | 直到 7 年前

××× × ×××× 7 年前

一桌一套 :after 每人 th

.table1 {
  border-spacing: 10px;
  border-collapse: collapse; 
  border: solid;
}

table.table1 th {
  border: solid;
  margin:5px;
      position: relative;
}

table.table1 tr {
  border-bottom: solid;
}
th:after{
    content: '';
    border-right: 5px solid white;
    position: absolute;
    height: 100%;
    border: 2px solid;
    top: -3.5px;
    width: 1.5px;
    background: white;
    border-top-color: white;
    right: -5px;
}
th:last-child:after{
border-right-color: white;
border-bottom-color: white;
right: -6px;
}

<table class="table1">
  <thead>
   <tr> 
     <th> col1 </th>
     <th> col2 </th>
     <th> col3 </th>
     <th> col4 </th>     
   </tr>
  </thead>
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

AG_ 7 年前

看看下面的代码片段,我用过 before 以获得所需的布局。

table {
  border-spacing: 10px;
  border-collapse: collapse;
  border-bottom: 1px solid;
  
}

thead th{
  position:relative;
  padding:10px 20px;
}

tbody td{
  padding: 10px 20px;
  text-align:center
}
thead th:before {
    content: "";
    position: absolute;
    width: calc(100% - 5px);
    height: 100%;
    background: #fff;
    z-index: -1;
    margin: -10px -20px;
    border: 1px solid;
    box-sizing: border-box;
    border-bottom: none;
  
}
thead th:last-child:before {
 
  width:calc(100% + 1px);
  
}


tbody tr {
  border: 1px solid;
  border-bottom:none
  
}

<table class="table1"  >
  <thead>
   <tr> 
     <th> col1col1col1col1col1col1 </th>
     <th> col2col2 </th>
     <th> col3col3col3col3col3col3 </th>
     <th> col4col4col4 </th>     
   </tr>
  </thead>

  <tbody>
   <tr> 
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>

daroldev 7 年前

div 在…内 th

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

th {
  position: relative;
  padding: 0;
}

tr {
  border-width: 1px;
  border-color: #000;
  border-bottom-style: solid;
}

tbody tr {
  border-left-style: solid;
  border-right-style: solid;
}

th > div {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  margin-right: 15px;
  text-align: center;
}

th:first-child  > div {
  margin-left: 0;
}

th:last-child > div {
  margin-right: -1px;
}

<table>
  <thead>
    <tr>
      <th>
        <div>
          col1
        </div>
      </th>
      <th>
        <div>
          col2
        </div>
      </th>
      <th>
        <div>
          col3
        </div>
      </th>
      <th>
        <div>
          col4
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> val1 </td>
      <td> val2 </td>
      <td> val3 </td>
      <td> val4 </td>
    </tr>
    <tr>
      <td> val21 </td>
      <td> val22 </td>
      <td> val23 </td>
      <td> val24 </td>
    </tr>
  </tbody>
</table>

rcanpahali 7 年前

thead tr {
      border-right: 5px solid white;
    }

这也会很有用, Spacing between thead and tbody

user2977799 7 年前

th:nth-child(odd)
{
   border: 1px solid #000;
}

td
{
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   text-align: center;
}

td:first-child
{
   border-left: 1px solid #000;
}

td:last-child
{
   border-right: 1px solid #000;
}

table
{
    border: none;
    border-collapse: collapse;
    padding: 0;
    margin: 0;

}

<table class="table1">
  <thead>
   <tr> 
     <th> col1 </th>
     <th> &nbsp; </th>
     <th> col2 </th>
     <th> &nbsp;</th>
     <th> col3 </th>
     <th> &nbsp;</th>
     <th> col4 </th>

 
   </tr>
  </thead>
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> &nbsp; </td>
     <td> val2 </td>
     <td> &nbsp; </td>
     <td> val3 </td>
     <td> &nbsp; </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> &nbsp; </td>
     <td> val22 </td>
     <td> &nbsp; </td>
     <td> val23 </td>
     <td> &nbsp; </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>