html - 将边框半径和填充添加到单个表格行

Question

我似乎无法在表格行 tr 中添加边框半径和边距。

这是我想要达到的效果:

但这才是我真正所在的地方:

我的 HTML:

<div id="working_hours_pop">
    <table>
     <tr><td class="day">Понеделник</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Вторник</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Среда</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Четврток</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr id="current"><td class="day">Петок</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Сабота</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Недела</td><td id="sun">Затворено</td></tr> 
  </table>
</div>

我的 CSS:

    html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table {
        position: relative; float: left; clear: none; display: block;
        width: auto; height: auto; margin: 0; padding: 0;               
        border: 0px yellow solid;
    }

html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop {
                    position: absolute; float: none; clear: both; top: 0; right: -350px;
                    width: 310px; height: auto; margin: -80px auto 0; padding: 15px 10px;
                    font-weight: 700; font-size: 12px;

                    -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
                    box-shadow: inset 0 0 0 2.98px rgba(255, 255, 255, 0.0);
                    background-color: rgba(45, 138, 191, 0.95);
                    z-index: 20;
                }

        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td { padding: 3px 0; }
        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td.day { width: 90px; text-align: left; }
        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td.time { width: 200px; text-align: right; }
        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td.time span { padding: 0 18px; }
        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td#sun { width: 200px; text-align: center; }

        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table tr#current {
            -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
            border: 1px solid;
            background-color: rgba(25, 60, 88, 0.95);
        }

我做错了什么吗？这可能吗？

我尝试在 tr 中添加一个 div 并为其设置样式以实现我想要的效果。但它没有用。

Answer 1

1. 确保表格的边框已折叠:border-collapse: collapse;
2. 为 tr#current 中的所有单元格设置背景色
3. 在每个 td:first 上设置一个 padding left
4. 在每个 td:last 上设置一个 padding right
5. 在每个 tr#current td:first
上设置左上角和左下角的边框半径
6. 在每个 tr#current td:last
上设置右上角和右下角的边框半径

这是修改后的 CSS/HTML，请注意，为了便于阅读，我已经从 CSS 中删除了一些您不需要的选择器。

JSFiddle:http://jsfiddle.net/o44hpx39/

HTML:

<div id="working_hours_pop">
    <table>
     <tr><td class="day">Понеделник</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Вторник</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Среда</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Четврток</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr id="current"><td class="day">Петок</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Сабота</td><td class="time">од 8:00ч<span>—</span>до 19:00ч</td></tr>
     <tr><td class="day">Недела</td><td id="sun">Затворено</td></tr> 
  </table>
</div>

CSS:

div#working_hours_pop table {
    position: relative; float: left; clear: none; display: block;
    width: auto; height: auto; margin: 0; padding: 0;               
    border: 0px yellow solid;
    border-collapse: collapse;
}

div#working_hours_pop table td { padding: 3px 0; }
div#working_hours_pop table td.day { width: 90px; text-align: left; }
div#working_hours_pop table td.time { width: 200px; text-align: right; }
div#working_hours_pop table td.time span { padding: 0 18px; }
div#working_hours_pop table td#sun { width: 200px; text-align: center; }

div#working_hours_pop table tr#current td { background-color: rgba(25, 60, 88, 0.95); }
div#working_hours_pop table tr td:first-child { padding-left: 10px; }
div#working_hours_pop table tr td:last-child { padding-right: 10px; }

div#working_hours_pop table tr#current td:first-child {
    -webkit-border-top-left-radius: 3px;
       -moz-border-top-left-radius: 3px;
            border-top-left-radius: 3px;

    -webkit-border-bottom-left-radius: 3px;
       -moz-border-bottom-left-radius: 3px;
            border-bottom-left-radius: 3px;
}

div#working_hours_pop table tr#current td:last-child {
    -webkit-border-top-right-radius: 3px;
       -moz-border-top-right-radius: 3px;
            border-top-right-radius: 3px;

    -webkit-border-bottom-right-radius: 3px;
       -moz-border-bottom-right-radius: 3px;
            border-bottom-right-radius: 3px;
}