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

Html – Discontinued border

I try to draw border-radius on certain rows.
The structure is as follow:

<tr>row with border-top-radius</tr>
<tr>normal row with some tds</tr>
<tr>normal row with some tds</tr>
<tr>normal row with some tds</tr>
<tr>row with border-bottom-radius</tr>

This block repeated with arbitrary number of <tr>normal row with some tds</tr>

The table should be border-collapse: collapse;

I try to play with <div> but border lines are discontinued

  • left border; Cell 1 and 5
  • right border; Cell 4 and 8

How to fix this?

table {
  border-collapse: collapse;
}

td {
  border: 2px solid black;
  padding: 10px;
  height: 50px;
  width: 100px;
}

.footer > td:first-child {
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:last-child {
  border-right: none;
  border-bottom: none;
  padding: 0;
}

.footer > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-left-radius: 10px;
}
.footer > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-right-radius: 10px;
}
<div>
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr class="footer">
      <td>
        <div>Cell 5</div>
      </td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>
        <div>Cell 8</div>
      </td>
    </tr>
  </table>
</div>

EDIT

By "This block repeated with arbitrary number of <tr>normal row with some tds</tr>", I mean there are multiple blocks like that block. The difference between each block is the number of normal <tr> inside that block.

Something like this

table {
  border-collapse: collapse;
}
th {
  border: 2px solid black;
}
td {
  border: 2px solid black;
  padding: 5px;
  height: 30px;
  width: 100px;
}
.spacer > td {
  border: none;
  height: 10px;
}
.header > td:first-child {
  border-left: none;
  border-top: none;
  padding: 0;
}
.header > td:last-child {
  border-right: none;
  border-top: none;
  padding: 0;
}
.header > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-top: 2px solid black;
  border-top-left-radius: 10px;
}
.header > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-top: 2px solid black;
  border-top-right-radius: 10px;
}

.footer > td:first-child {
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:last-child {
  border-right: none;
  border-bottom: none;
  padding: 0;
}
.footer > td:first-child > div {
  height: 100%;
  width: 100%;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-left-radius: 10px;
}
.footer > td:last-child > div {
  height: 100%;
  width: 100%;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-right-radius: 10px;
}
<div>
  <table>
    <thead>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </thead>
    <tbody>
      <tr class="spacer">
        <td colspan="4"></td>
      </tr>
      <tr class="header">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr class="footer">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
      <tr class="spacer">
        <td colspan="4"></td>
      </tr>
      <tr class="header">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr class="footer">
        <td>
          <div>Cell</div>
        </td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div>Cell</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Tags:

2

Answers


  1. 0

    Just add border outer div of table, and give inside borders through td as below. It will give consistent borders.

    table {
  border-collapse: collapse;
}

.tableDiv {
  border: 2px solid red;
  border-radius: 0 0 10px 10px;
  display: inline-block;
  overflow: hidden;
}

tr>td {
  border-right: 2px solid red;
  padding: 10px;
  height: 50px;
  width: 100px;
}

tr>td:last-child {
  border-right: 0px;
}

.footer>td {
  border-top: 2px solid red
}
    <div class="tableDiv">
  <table>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr class="footer">
      <td>
        <div>Cell 5</div>
      </td>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>
        <div>Cell 8</div>
      </td>
    </tr>
  </table>
</div>
    Login or Signup to reply.
  2. 0

    As others have mentioned, you will need to wrap your <table> inside of a <div> to get rounded corners.

    Once you set the border-collapse property of the <table> to collapse, you lose the ability to set the border-radius.

    Here is a modern approach that also utilizes semantic HTML i.e. <thead>, <tbody> and <tfoot>:

    :root {
  --border-color: red;
  --border-radius: 1rem;
  --border-style: solid;
  --border-width: 2px;
}

.rounded-table {
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  width: fit-content;
}

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

.rounded-table th,
.rounded-table td {
  border-bottom: var(--border-width) solid var(--border-color);
  border-right: var(--border-width) solid var(--border-color);
  padding: 0.5rem;
}

.rounded-table th:last-child,
.rounded-table td:last-child {
  border-right: none;
}

.rounded-table tfoot tr:last-child td {
  border-bottom: none;
}

.border-blue {
  --border-color: blue;
}
    <div class="rounded-table">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
      </tr>
      <tr>
        <td>Row 2, Col 1</td>
        <td>Row 3, Col 2</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
</div>
<hr>
<div class="rounded-table border-blue">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
        <td>Row 1, Col 3</td>
        <td>Row 1, Col 4</td>
      </tr>
      <tr>
        <td>Row 2, Col 1</td>
        <td>Row 3, Col 2</td>
        <td>Row 3, Col 3</td>
        <td>Row 3, Col 4</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
        <td>Footer 3</td>
        <td>Footer 4</td>
      </tr>
    </tfoot>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search