Html Question posted in
Some basic documentation can be found here.

Html – How to insert gap between columns in table

I want to create this table layout. How can I add a gap between columns, similar to the design? I used border-collapse: separate, but then the border in tbody are hard to adjust, so I changed to collapse. Is this a good approach for creating this table, or should I not use ? I tried to find the answer here, but coulnd’t find any satisfying answer
table image

I created this table

.table-container {
  overflow: hidden;
}

[data-module=data-table] {
  border-collapse: collapse;
  border-spacing: 16px 0;
  table-layout: fixed;
}

[data-module=data-table] thead {
  margin-top: 40px;
}

[data-module=data-table] thead tr:first-of-type {
  border-bottom: 1px solid #242424;
  position: relative;
}

[data-module=data-table] thead tr:first-of-type th {
  color: #242424;
  /* Desktop/Fira Sans/H2 Regular */
  font-family: "Bree Serif";
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 36.4px */
  text-align: left;
  background-color: #ddd;
  padding: 0 32px;
  height: 5rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

@media (max-width: 768px) {
  [data-module=data-table] thead tr:first-of-type th {
    /* Mobile/Fira Sans/H2 Regular */
    font-family: "Bree Serif";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 26px */
  }
}

[data-module=data-table] thead tr:first-of-type th:first-of-type {
  color: #242424;
  /* Desktop/Fira Sans/Copy 1 Regular */
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  background-color: white;
}

@media (max-width: 768px) {
  [data-module=data-table] thead tr:first-of-type th:first-of-type {
    /* Mobile/Fira Sans/Copy 1 Regular */
    font-size: 1rem;
  }
}

[data-module=data-table] thead tr:first-of-type th.highlighted {
  background-color: #006366;
  color: #fff;
}

[data-module=data-table] thead tr:first-of-type::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #242424;
}

[data-module=data-table] thead .table-header-content {
  color: #242424;
  /* Desktop/Fira Sans/Copy 1 Regular */
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  text-align: left;
}

@media (max-width: 768px) {
  [data-module=data-table] thead .table-header-content {
    /* Mobile/Fira Sans/Copy 1 Regular */
    font-size: 1rem;
  }
}

[data-module=data-table] thead .table-header-content h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  [data-module=data-table] thead .table-header-content h3 {
    font-size: 1.5rem;
  }
}

[data-module=data-table] tbody tr td,
[data-module=data-table] tbody tr th {
  position: relative;
}

[data-module=data-table] tbody tr td>.cell-content,
[data-module=data-table] tbody tr th>.cell-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: center;
  min-height: 144px;
  text-align: center;
}

[data-module=data-table] tbody tr td::after,
[data-module=data-table] tbody tr th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #242424;
}

[data-module=data-table] tbody tr td {
  border-left: 1px solid #242424;
  border-right: 1px solid #242424;
}

[data-module=data-table] tbody tr:last-child td::after {
  display: none;
}

[data-module=data-table] tbody tr:first-child {
  border-top: 1px solid #242424;
}

[data-module=data-table] tbody tr:last-child {
  border-bottom: 1px solid #242424;
}

[data-module=data-table] tbody th>div {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-module=data-table] tbody th>div>div {
  text-align: left;
}

[data-module=data-table] tbody th>div>div p:first-of-type {
  color: #242424;
  /* Desktop/Fira Sans/Copy 1 SemiBold */
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  /* 27px */
}

@media (max-width: 768px) {
  [data-module=data-table] tbody th>div>div p:first-of-type {
    /* Mobile/Fira Sans/Copy 1 SemiBold */
    font-size: 16px;
    line-height: 150%;
    /* 24px */
  }
}

[data-module=data-table] tbody th>div>div p:last-of-type {
  color: #515151;
  /* Desktop/Fira Sans/Hinweistext */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 21px */
  color: #515151;
}

@media (max-width: 768px) {
  [data-module=data-table] tbody th>div>div p:last-of-type {
    /* Mobile/Fira Sans/Hinweis */
    font-size: 12px;
    line-height: 150%;
    /* 18px */
  }
}

[data-module=data-table] tbody td.highlighted-column {
  border-left: 2px #006366 solid;
  border-right: 2px #006366 solid;
}

[data-module=data-table] tbody td.highlighted-column:first-of-type {
  background-color: red;
}
<div class="table-container">
    <table data-module="data-table">
        <thead>
            <tr>
                <th>Leistungsbereich</th>
                <th>BASIS</th>
                <th class="highlighted">OPTIMAL</th>
                <th>PLUS</th>
            </tr>
            <tr>
                <th colspan="4">
                    <div class="table-header-content">
                        <h3>Table Headline</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                        <ul>
                            <li>Lorem Ipsum dolor sit amet</li>
                            <li>Consetetur sadipscing elitr, sed diam nonumy eirmod</li>
                            <li>Lorem Ipsum dolor sit amet</li>
                        </ul>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>
                    <div>
                        <div>
                            <p>Column Headline</p>
                            <p>Hinweis text</p>
                        </div>
                    
                    </div>
                </th>
                <td>
                    <div class="cell-content">-</div>
                </td>
                <td class="highlighted-column">
                    <div class="cell-content">
                        <div class="checkmark">✔</div>
                        <p>Lorem, ipsum dolor.</p>
                        <p>Hinweis</p>
                    </div>
                </td>
                <td>
                    <div class="cell-content checkmark">✔</div>
                </td>
            </tr>
            <tr>
                <th>
                    <div>
                        <div>
                            <p>Column Headline</p>
                            <p>Hinweis text</p>
                        </div>
                        
                    </div>
                </th>
                <td>
                    <div class="cell-content">-</div>
                </td>
                <td class="highlighted-column">
                    <div class="cell-content checkmark">✔</div>
                </td>
                <td>
                    <div class="cell-content checkmark">✔</div>
                </td>
            </tr>
            <tr>
                <th>
                    <div>
                        <div>
                            <p>Column Headline</p>
                            <p>Hinweis text</p>
                        </div>
                        
                    </div>
                </th>
                <td>
                    <div class="cell-content">-</div>
                </td>
                <td class="highlighted-column">
                    <div class="cell-content checkmark">✔</div>
                </td>
                <td>
                    <div class="cell-content">-</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Tags:

2

Answers


  1. 0

    If you remove the border-collapse: collapse;, you should then be able to use a selector like [data-module=data-table] tr:first-of-type td.highlighted-column to add the top border (with border-radius as necessary) to complete the card look.

    It looks like you’re doing something similar on another column.

    :last-of-type on the tr to add a rounded border to the bottom.

    Login or Signup to reply.
  2. 0

    A workaround (!) is to duplicate the content and hide the unnecessary content with visibility: collapse;, and then set border-collapse: separate; to the upper table that contains the menu in question, like so:

    .table-container {
  overflow: hidden;
}

[data-module=data-table] {
  border-collapse: collapse;
  border-spacing: 16px 0;
  table-layout: fixed;
}

[data-module=data-table] thead {
  margin-top: 40px;
}

[data-module=data-table] thead tr:first-of-type {
  border-bottom: 1px solid #242424;
  position: relative;
}

[data-module=data-table] thead tr:first-of-type th {
  color: #242424;
  /* Desktop/Fira Sans/H2 Regular */
  font-family: "Bree Serif";
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 36.4px */
  text-align: left;
  background-color: #ddd;
  padding: 0 32px;
  height: 5rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

@media (max-width: 768px) {
  [data-module=data-table] thead tr:first-of-type th {
    /* Mobile/Fira Sans/H2 Regular */
    font-family: "Bree Serif";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    /* 26px */
  }
}

[data-module=data-table] thead tr:first-of-type th:first-of-type {
  color: #242424;
  /* Desktop/Fira Sans/Copy 1 Regular */
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  background-color: white;
}

@media (max-width: 768px) {
  [data-module=data-table] thead tr:first-of-type th:first-of-type {
    /* Mobile/Fira Sans/Copy 1 Regular */
    font-size: 1rem;
  }
}

[data-module=data-table] thead tr:first-of-type th.highlighted {
  background-color: #006366;
  color: #fff;
}

[data-module=data-table] thead tr:first-of-type::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #242424;
}

[data-module=data-table] thead .table-header-content {
  color: #242424;
  /* Desktop/Fira Sans/Copy 1 Regular */
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 27px */
  text-align: left;
}

@media (max-width: 768px) {
  [data-module=data-table] thead .table-header-content {
    /* Mobile/Fira Sans/Copy 1 Regular */
    font-size: 1rem;
  }
}

[data-module=data-table] thead .table-header-content h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 130%;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  [data-module=data-table] thead .table-header-content h3 {
    font-size: 1.5rem;
  }
}

[data-module=data-table] tbody tr td,
[data-module=data-table] tbody tr th {
  position: relative;
}

[data-module=data-table] tbody tr td>.cell-content,
[data-module=data-table] tbody tr th>.cell-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  align-items: center;
  min-height: 144px;
  text-align: center;
}

[data-module=data-table] tbody tr td::after,
[data-module=data-table] tbody tr th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #242424;
}

[data-module=data-table] tbody tr td {
  border-left: 1px solid #242424;
  border-right: 1px solid #242424;
}

[data-module=data-table] tbody tr:last-child td::after {
  display: none;
}

[data-module=data-table] tbody tr:first-child {
  border-top: 1px solid #242424;
}

[data-module=data-table] tbody tr:last-child {
  border-bottom: 1px solid #242424;
}

[data-module=data-table] tbody th>div {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-module=data-table] tbody th>div>div {
  text-align: left;
}

[data-module=data-table] tbody th>div>div p:first-of-type {
  color: #242424;
  /* Desktop/Fira Sans/Copy 1 SemiBold */
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  /* 27px */
}

@media (max-width: 768px) {
  [data-module=data-table] tbody th>div>div p:first-of-type {
    /* Mobile/Fira Sans/Copy 1 SemiBold */
    font-size: 16px;
    line-height: 150%;
    /* 24px */
  }
}

[data-module=data-table] tbody th>div>div p:last-of-type {
  color: #515151;
  /* Desktop/Fira Sans/Hinweistext */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 21px */
  color: #515151;
}

@media (max-width: 768px) {
  [data-module=data-table] tbody th>div>div p:last-of-type {
    /* Mobile/Fira Sans/Hinweis */
    font-size: 12px;
    line-height: 150%;
    /* 18px */
  }
}

[data-module=data-table] tbody td.highlighted-column {
  border-left: 2px #006366 solid;
  border-right: 2px #006366 solid;
}

[data-module=data-table] tbody td.highlighted-column:first-of-type {
  background-color: red;
}
    <div class="table-container">
  <table data-module="data-table" style="border-collapse: separate;">
    <thead>
      <tr>
        <th>Leistungsbereich</th>
        <th>BASIS</th>
        <th class="highlighted">OPTIMAL</th>
        <th>PLUS</th>
      </tr>
      <tr style="visibility: collapse;">
        <th colspan="4">
          <div class="table-header-content">
            <h3>Table Headline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <ul>
              <li>Lorem Ipsum dolor sit amet</li>
              <li>Consetetur sadipscing elitr, sed diam nonumy eirmod</li>
              <li>Lorem Ipsum dolor sit amet</li>
            </ul>
          </div>
        </th>
      </tr>
    </thead>
    <tbody style="visibility: collapse;">
      <tr>
        <th>
          <div>
            <div>
              <p>Column Headline</p>
              <p>Hinweis text</p>
            </div>

          </div>
        </th>
        <td>
          <div class="cell-content">-</div>
        </td>
        <td class="highlighted-column">
          <div class="cell-content">
            <div class="checkmark">✔</div>
            <p>Lorem, ipsum dolor.</p>
            <p>Hinweis</p>
          </div>
        </td>
        <td>
          <div class="cell-content checkmark">✔</div>
        </td>
      </tr>
      <tr>
        <th>
          <div>
            <div>
              <p>Column Headline</p>
              <p>Hinweis text</p>
            </div>

          </div>
        </th>
        <td>
          <div class="cell-content">-</div>
        </td>
        <td class="highlighted-column">
          <div class="cell-content checkmark">✔</div>
        </td>
        <td>
          <div class="cell-content checkmark">✔</div>
        </td>
      </tr>
      <tr>
        <th>
          <div>
            <div>
              <p>Column Headline</p>
              <p>Hinweis text</p>
            </div>

          </div>
        </th>
        <td>
          <div class="cell-content">-</div>
        </td>
        <td class="highlighted-column">
          <div class="cell-content checkmark">✔</div>
        </td>
        <td>
          <div class="cell-content">-</div>
        </td>
      </tr>
    </tbody>
  </table>
  <table data-module="data-table">
    <thead>
      <tr style="visibility: collapse;">
        <th>Leistungsbereich</th>
        <th>BASIS</th>
        <th class="highlighted">OPTIMAL</th>
        <th>PLUS</th>
      </tr>
      <tr>
        <th colspan="4">
          <div class="table-header-content">
            <h3>Table Headline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <ul>
              <li>Lorem Ipsum dolor sit amet</li>
              <li>Consetetur sadipscing elitr, sed diam nonumy eirmod</li>
              <li>Lorem Ipsum dolor sit amet</li>
            </ul>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <div>
            <div>
              <p>Column Headline</p>
              <p>Hinweis text</p>
            </div>

          </div>
        </th>
        <td>
          <div class="cell-content">-</div>
        </td>
        <td class="highlighted-column">
          <div class="cell-content">
            <div class="checkmark">✔</div>
            <p>Lorem, ipsum dolor.</p>
            <p>Hinweis</p>
          </div>
        </td>
        <td>
          <div class="cell-content checkmark">✔</div>
        </td>
      </tr>
      <tr>
        <th>
          <div>
            <div>
              <p>Column Headline</p>
              <p>Hinweis text</p>
            </div>

          </div>
        </th>
        <td>
          <div class="cell-content">-</div>
        </td>
        <td class="highlighted-column">
          <div class="cell-content checkmark">✔</div>
        </td>
        <td>
          <div class="cell-content checkmark">✔</div>
        </td>
      </tr>
      <tr>
        <th>
          <div>
            <div>
              <p>Column Headline</p>
              <p>Hinweis text</p>
            </div>

          </div>
        </th>
        <td>
          <div class="cell-content">-</div>
        </td>
        <td class="highlighted-column">
          <div class="cell-content checkmark">✔</div>
        </td>
        <td>
          <div class="cell-content">-</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search