桌子的圆角

Question

我尝试制作桌子的圆角

这是我的代码

<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>

但它不起作用。

麻烦在哪里？

如何让它圆润？

修改

为了充分理解问题，我添加了整个代码视图。我看到边框，但没有圆角

Answer 1

</table>失踪

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需要将border radius属性应用于外部表元素，而不是单独的行/列

请参阅here

Answer 3

您的代码非常完美。如果您愿意，请运行代码段。

<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>

Answer 4

您应该使用border-collapse: separate;作为表的CSS。