CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel Serretti
Daniel Serretti

Reputation: 342

Table with rounded border using CSS

I have an issue. I have a table made with pure HTML code, here is it:

#calendarTable {
  text-align: center;
  width: 80%;
  height: 100%;
  color: #18B6E6;
  border-color: #18B6E6;
  border: solid 1px;
  border-radius: 20px;
}

#calendarTable td {
  border: solid 1px;
  border-radius: 4px;
}

#calendarTable th {
  border: solid 1px;
  font-weight: 700;
}
<table id="calendarTable">
  <tr>
    <th id="tableHeader" colspan=7></th>
  </tr>
  <tr>
    <th>Dom</th>
    <th>Seg</th>
    <th>Ter</th>
    <th>Qua</th>
    <th>Qui</th>
    <th>Sex</th>
    <th>Sáb</th>
  </tr>
  <tbody id="tableBody"></tbody>
  <tr>
    <td colspan=7>
    <p>
      <form id="dateChooser" name="dateChooser">
        <select name="chooseMonth" onChange="populateTable(this.form)">
          <option selected>Janeiro
          <option>Fevereiro
          <option>Março
          <option>Abril
          <option>Maio
          <option>Junho
          <option>Julho
          <option>Agosto
          <option>Setembro
          <option>Outubro
          <option>Novembro
          <option>Dezembro
        </select>
        <select name="chooseYear" onChange="populateTable(this.form)">
        </select>
      </form>
    </p>
    </td>
  </tr>
</table>

I want to round the borders using only CSS, I just tried using the border-radius property but my table is not changing borders.

Anyone have a tip for me?

Thanks in advance!

Upvotes: 3

Views: 17122

Answers (6)

luQ
luQ

Reputation: 529

based on as tailwind:

.table-bordered {
    @apply w-full border-separate border-spacing-0 overflow-clip rounded-lg border border-l-0;
}

.table-bordered td,
.table-bordered th {
    @apply border-l border-t text-left align-top;
}

.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
    @apply border-t-0;
}

.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
    @apply rounded-tl-lg;
}

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
    @apply rounded-bl-lg;
}

Upvotes: 0

Sildoreth
Sildoreth

Reputation: 1935

As others have said, this is the code that should give the look you want.

Code

#RoundedTable {
  border: 1px solid black;
  border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 3px;
}
<table id="RoundedTable">
  <tr><th>Table header</th><th>Another header cell</th></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
  <tr><td>Table cell...</td><td>More data...</td></tr>
</table>

Caveat

For this to work, though, you need to make sure that border-collapse is set to separate instead of collapse for your table. Otherwise, neither the radius for the cells nor the radius for the whole table will work.

So look through the other CSS that may be affecting your table. If you find border-collapse: collapse; anywhere, that's the problem.

Upvotes: 3

Marc Audet
Marc Audet

Reputation: 46795

border-radius seems to work both on table and td elements, with or without the border attribute on table.

You must have some other CSS rules coming into play.

table {
  border: 1px solid blue;
  border-radius: 10px;
}
table td, table th {
  border: 1px solid gray;
  border-radius: 10px;
  padding: 5px;
}
<table border=1>
  <tr>
    <th>Table header...</th>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
  <tr>
    <td>Table cell...</td>
  </tr>
</table>

Upvotes: 2

James South
James South

Reputation: 10645

Here's a simplified table with border radius applied. The trick is to set the left border of the cell rather than the table itself. It'll work with or without a thead and I've annotated the css to show what I'm doing.

/*
 * First normalise some of the attributes
 */

table td,
table th {
  padding: .5rem;
  text-align: left;
  vertical-align: top;
}
/*
 * Add the border, set border spacing etc
 * The left width is 0 so cell border can be applied without doubling up.
 */

.table-bordered {
  border: 1px solid silver;
  border-left-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1rem;
}
/*
 * Add the border to table cell/header
 */

.table-bordered td,
.table-bordered th {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
/*
 * Remove the top border from the first header/cell
 */

.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
  border-top-width: 0;
}
/*
 * Set the border radius for the first header/cell
 */

.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
  border-top-left-radius: 1rem;
}
/*
 * Set the border radius for the last header/cell
 */

.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
  border-bottom-left-radius: 1rem;
}
<table class="table-bordered">
  <thead>
    <tr>
      <th scope="col">Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Data</th>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Data</th>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <th scope="row">Data</th>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Upvotes: 8

Floremin
Floremin

Reputation: 4089

Remove the border attribute on the table. It is still supported in browsers, but it is removed from HTML5 specification. The effect that attribute makes is probably not what you want anyways.

If you want border around each cell in your table just specify that in CSS and include border-radius there as well.

I.e.

#calendarTable td { border: solid 1px; border-radius: 4px; }

If you just want border around the whole table, use the same css on table selector:

#calendarTable { border: solid 1px; border-radius: 4px; }

Upvotes: 2

codefreaK
codefreaK

Reputation: 3662

#calendarTable{

    border-radius:20px;
}

DEMO

Upvotes: 2

Related Questions