CODEWITHSUNDEEP
javascripthtmlcsshtml-table
user2780132
user2780132

Reputation: 87

html table cells with no border

I want to create a html table as below. I tried everything like frame="hsides" rules="groups" etc. Nothing seems to work. Any thoughts on this please?

enter image description here

UPDATE: Here is the code. I need less space between the columns and no line on the tbody.

<table class="grouped-columns-table" cellpadding="10" cellspacing="0">
   <thead>
      <tr>
          <th>Col A1</th>
          <th class=""></th><!-- SPACER -->
          <th>Col A2</th>
          <th class=""></th><!-- SPACER -->
          <th>Col B1</th>
      </tr>
  </thead>
 <tbody class="tb">
    <tr>
        <td>A1</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>A2</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>B1</td>
     </tr>
     <tr>
        <td>A1</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>A2</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>B1</td>
     </tr>
     <tr>
        <td>A1</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>A2</td>
        <td class="content-group-spacer"></td><!-- SPACER -->
        <td>B1</td>
     </tr>
 </tbody>
</table>

.grouped-columns-table {
  border-collapse: collapse;
}

.content-group {
  border: 0;
}

.content-group-spacer {
    width: 1px;
}

.grouped-columns-table td:not(.content-group-spacer) {
    border: 0px solid #ccc;
    border-collapse: collapse;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 0px solid #ccc;
    border-bottom: 0px solid #ccc;
}

tbody {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
}

Upvotes: 1

Views: 476

Answers (2)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

You can do it using first-child and last-child selectors, see fiddle: https://jsfiddle.net/snpsp6as/1/

.tb > tr:last-child > td{border-bottom: 1px solid #ccc;}
.tb > tr:last-child > .content-group-spacer{border-bottom: none !important;}
.tb > tr:first-child > td{border-top: 1px solid #ccc;}
.tb > tr:first-child > .content-group-spacer{border-top: none !important;}

Upvotes: 0

Quentin
Quentin

Reputation: 943560

You are massively over complicating this. Get rid of the presentational HTML (including the data cells with no data in them).

You just need to set border-spacing so you have space between your cells where you want them, and then set borders around the edges of the cells you want borders on.

.grouped-columns-table {
  border-collapse: seperate;
  border-spacing: 10px 0;
}
.grouped-columns-table tbody tr > * {
  border-left: solid black 1px;
  border-right: solid black 1px;
}
.grouped-columns-table tbody tr:first-child td {
  border-top: solid black 1px;
}
.grouped-columns-table tbody tr:last-child td {
  border-bottom: solid black 1px;
}
<table class="grouped-columns-table">
  <thead>
    <tr>
      <th>Col A1</th>
      <th>Col A2</th>
      <th>Col B1</th>
    </tr>
  </thead>
  <tbody class="tb">
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>B1</td>
    </tr>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>B1</td>
    </tr>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>B1</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions