桌子的圆角

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>

但它不起作用。

麻烦在哪里？

我怎样才能使它变圆？

编辑

我添加了整个代码 oа View 以全面了解问题。我看到边框，但没有圆角

Answer 1

</table> 不见了

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

Answer 2

Table 的 CSS 应使用 border-collapse: separate;。

Answer 3

您只需要将边框半径属性应用于外部表格元素，而不是单个行/列

见here

Answer 4

你的代码很完美。如果需要，运行代码 sn-p。

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