CODEWITHSUNDEEP
htmlcsshtml-table
Alex.Barylski
Alex.Barylski

Reputation: 2949

Nested tables must have collapsed borders

I have Googled and read a few articles on SO. Unfortunately explicitly setting borders on nested tables is not an option - I am positive I have done this before using border-collapse: collapse

Maybe I imagined the whole thing. I have the following CSS:

    .table-grid {
        width: 100%;

    }

    .table-grid > thead > tr > th, 
    .table-grid > tbody > tr > th, 
    .table-grid > tfoot > tr > th, 
    .table-grid > thead > tr > td, 
    .table-grid > tbody > tr > td, 
    .table-grid > tfoot > tr > td {
        border: 1px solid red;
        border-collapse: collapse;
    }

Red borders still doubling up, tripling up, etc...what am I missing? Or misunderstanding?

This is for the UI of rather complicated scheduling tool for CNC machines - so DIV's are not required - I need it done using tables.

Anyway ideas?

EDIT | Markup below

<table class="table-grid" style="background-color: #fff">
    <tr>
        <th>Month
            <table class="table-grid">
                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
                <th>Apr</th>
            </table>
        </th>
    </tr>

This is somewhat trivialized - otherwise id' just keep the the Month as a colspan"7" - the actual scope is far more complicated - so colspan techniques won't suffice

Upvotes: 2

Views: 6433

Answers (2)

Johansrk
Johansrk

Reputation: 5250

what you also can do is add this styling to the child table

width: calc(100% + 2px);
border-collapse: collapse;
border: none;
margin-left: -1px;

Upvotes: 0

Tyler Roper
Tyler Roper

Reputation: 21672

border-collapse: collapse; must be applied to the table for it to take effect, rather than the table cells. However, border-collapse only works on table cells (<td> or <th>) that share a common parent <table>. This means that you cannot merge cells of nested tables, nor can you merge elements that aren't <td> or <th> elements.

In your example this becomes a bit tricky being that all tables, including the nested ones, share the same single class.

With a little creative CSS, we can hide the bottom and left borders from all our nested cells. Additionally, we'll have to remove the right border of the last cell in a row.

Using a combination of the nested selector .table-grid .table-grid, as well as :last-child for altering the final cell of a nested row, you can come up with an infinitely "nestable" example that looks something like this:

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

.table-grid>tbody>tr>th {
  padding: 0;
}

.table-grid>thead>tr>th,
.table-grid>tbody>tr>th,
.table-grid>tfoot>tr>th,
.table-grid>thead>tr>td,
.table-grid>tbody>tr>td,
.table-grid>tfoot>tr>td {
  border: 1px solid red;
}

.table-grid .table-grid td,
.table-grid .table-grid th {
  border-top: 1px solid red;
  border-right: 1px solid red;
  border-bottom: 0;
  border-left: 0;
}

.table-grid .table-grid td:last-child,
.table-grid .table-grid th:last-child {
  border-right: 0;
}
<table class="table-grid" style="background-color: #fff">
  <tr>
    <th>Month
      <table class="table-grid">
        <tr>
          <th>Jan</th>
          <th>Feb</th>
          <th>Mar</th>
          <th>Apr</th>
        </tr>
      </table>
    </th>
  </tr>
</table>

Upvotes: 4

Related Questions