桌子的圆角

时间:2017-07-04 15:03:21

标签: html css

我尝试制作桌子的圆角

这是我的代码

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

但它不起作用。

麻烦在哪里?

如何让它圆润?

修改

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

4 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

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

请参阅here

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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