CODEWITHSUNDEEP
htmlcss-tables
user1995565
user1995565

Reputation: 165

How can I have borders around the table row, but not on any inner-cells?

I would like a table such that I have multiple rows, but no inner-vertical lines. That implies a complete border around the table, but no inner-column borders. Specifically, I would want the ability to have that, but with spacing around each row and curved edges, as shown in this example code: https://jsfiddle.net/n14ye7nk/

body {
  font-family: sans-serif;
}

#table {
  border-spacing: 0.3em;
}

#table td {
  border: 2px solid #30c;
  border-radius: 0.4em;
  padding: 1em;
  text-align: center;
}

Upvotes: 1

Views: 2942

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

Unfortunately tables aren't really designed to do what you are asking.

In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.

body {
  font-family: sans-serif;
}

#table {
  border-collapse: collapse;
  border-spacing: 0.3em;
}

#table tr {
  border: 2px solid blue;
}

#table td {
  padding: 1em;
  text-align: center;
}
<table id="table">
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>a table</td>
    </tr>
    <tr>
      <td>with</td>
      <td>rounded</td>
      <td>cells</td>
    </tr>
  </tbody>
</table>

Table row spacing can be done with border-collapse: separate... though this doesn't allow for the border.

Note that neither approach will allow border-radius to be applied to tr. The best way of doing this is to simply set individual corner radii on the <td> element :first-child and :last-child. Note that you'll want cellspacing="0" on the <table> itself.

body {
  font-family: sans-serif;
}

#table td {
  padding: 1em;
  text-align: center;
}

#table tr:first-of-type td {
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
}

#table tr:last-of-type td {
  border-bottom: 2px solid blue;
}

#table tr:first-child td:first-child {
  border-left: 2px solid blue;
  border-top-left-radius: 10px;
}

#table tr:first-child td:last-child {
  border-right: 2px solid blue;
  border-top-right-radius: 10px;
}

#table tr:last-child td:first-child {
  border-left: 2px solid blue;
  border-bottom-left-radius: 10px;
}

#table tr:last-child td:last-child {
  border-right: 2px solid blue;
  border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>a table</td>
    </tr>
    <tr>
      <td>with</td>
      <td>rounded</td>
      <td>cells</td>
    </tr>
  </tbody>
</table>

Again, this is not ideal.

The best way of handling this really is by completing replacing the table with <div> elements instead. This way you can make use of calc() in the width to ensure even spacing, float: left to control how many elements are in a row, and margin-bottom to add whitespace in between the rows. You also only have to apply the core border-radius on the .row itself:

.row {
  font-family: sans-serif;
  border: 2px solid blue;
  border-radius: 10px;
}

.row div {
  display: inline-block;
  text-align: center;
  padding: 1em;
  width: calc(100% / 3 - (3px + 2em));

}

.row:first-of-type {
  margin-bottom: 20px;
}
<div class="row">
  <div>this</div>
  <div>is</div>
  <div>a table</div>
</div>
<div class="row">
  <div>with</div>
  <div>rounded</div>
  <div>cells</div>
</div>

Upvotes: 2

Related Questions