Round corners of table

Question

I try to make round corners of my table

Here is my code

<table class="table" style="width: 100%;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
  <tr style="background: white;">
    <th style="font-size: 18px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Monday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Tuesday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Wednesday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;">  Thursday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;">  Friday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Saturday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Sunday</b>
    </th>

  </tr>
  <tr>
    <td class="title" style="text-align: center; font-size: 20px;">
      <div style="margin-top: 10px;"><b class="blue-text">08.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">09.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">10.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">11.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">12.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">13.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">14.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">15.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">16.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">17.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">18.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">19.00</b></div>
    </td>



  </tr>
</table>

But it not works.

Where is trouble?

How I can make it rounded?

EDIT

I added whole code oа View for full understanding of problem. I see border, but not with rounded corners

That's because you added the `` where OP forgot to write it ;) @SlimShady — kevin b., Jul 04 '17 at 15:14

score 1 · Answer 1 · answered Jul 04 '17 at 15:05

</table> was missing

<table class="table" style="width: 100%;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
  <tr style="background: white">

    <th style="font-size: 18px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;"> Monday</b>
    </th>
    <th style="font-size: 20px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;"> Tuesday</b>
    </th>
    <th style="font-size: 20px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;"> Wednesday</b>
    </th>
    <th style="font-size: 20px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;">  Thursday</b>
    </th>
    <th style="font-size: 20px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;">  Friday</b>
    </th>
    <th style="font-size: 20px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;"> Saturday</b>
    </th>
    <th style="font-size: 20px; text-align: center;color:#1d69b4;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
      <b>Hours</b><b style="margin-left: 30px;"> Sunday</b>
    </th>

  </tr>
</table>

If it is still not working for you, post all code you are using. Maybe there is an overwrite somewhere. — Gerard, Jul 04 '17 at 15:08
I made a snippet of your code. When you run it, it works like a charm. — Gerard, Jul 04 '17 at 15:26

score 0 · Answer 2 · answered Jul 04 '17 at 15:06

0

You only need to apply the border radius property to the outer table element, not the individual rows / columns

See here

answered Jul 04 '17 at 15:06

Isaac Pasternak

53
9

score 0 · Answer 3 · answered Jul 04 '17 at 15:28

Your code is perfect. Run code snippet if you want to.

<table class="table" style="width: 100%;border-style: solid; border-color: #1d69b4;border-radius: 10px;">
  <tr style="background: white;">
    <th style="font-size: 18px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Monday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Tuesday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Wednesday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;">  Thursday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;">  Friday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Saturday</b>
    </th>
    <th style="font-size: 20px; text-align: center;">
      <b>Hours</b><b style="margin-left: 30px;"> Sunday</b>
    </th>

  </tr>
  <tr>
    <td class="title" style="text-align: center; font-size: 20px;">
      <div style="margin-top: 10px;"><b class="blue-text">08.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">09.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">10.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">11.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">12.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">13.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">14.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">15.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">16.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">17.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">18.00</b></div>
      <div style="margin-top: 10px;"><b class="blue-text">19.00</b></div>
    </td>



  </tr>
</table>

Yeah, I see this, but when I run it on my machine, it not works — Sukhomlin Eugene, Jul 04 '17 at 15:29
Try adding `border-collapse: collapse;` in the CSS of **table** — Soumya, Jul 04 '17 at 15:36

score 0 · Accepted Answer · answered Jul 04 '17 at 15:44

0

You should use border-collapse: separate; for the CSS of Table.

answered Jul 04 '17 at 15:44

Soumya

147
9

Round corners of table

4 Answers4