将边框半径和填充添加到单个 Table 行

Question

我似乎无法在 table 行 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

确保 table 的边框已折叠：border-collapse: collapse;
为 tr#current
在每个 td:first
在每个 td:last
在每个 tr#current td:first
在每个 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;
}

Answer 2

您不能将 border-radius 应用于 tr 元素，只能将 td 和 table 以及其他一些元素应用，但我没有测试过它们，但肯定不是 tr。

这里有一个替代解决方案，它使每行的第一个单元格和最后一个单元格都有一个边框半径，并给人一种整行都有一个边框半径的错觉：

#current td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#current td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Answer 3

我向所有 tr 添加了 display: block;，这解决了我的问题。

这是 CSS:

html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop {
                    position: absolute; float: none; clear: both; top: 0; right: -295px;
                    width: 300px; height: auto; margin: -79px 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:after{
                    content: "";
                    position: absolute; float: none; clear: both; display: block; top: 90px; left: -8px;
                    width: 0; height: 0; margin: 0; padding: 0;

                    border-style: solid; border-width: 15px 10px 15px 0;
                    border-color: transparent rgba(45, 135, 187, 1) transparent transparent;
                }
                    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: 250; height: auto; margin: 0; padding: 0;
                    }
                        html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td { padding: 3px 0; border: 0px green solid; }
                            html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td.day { width: 100px; text-align: left; }
                                html body div#sidebar_panel div#sidebar_cnt div#working_hours div#working_hours_pop table td.day_sun { width: 145px; 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 {
                            display: block;
                            width: 280px; padding: 0 10px;
                        }
                        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: 0px solid; margin: 1px 1px; padding: 2px 8px; 
                            background-color: rgba(25, 60, 88, 0.65); font-weight: 600;
                        }

将边框半径和填充添加到单个 Table 行

Add border-radius and padding to a single Table Row

html

css

html-table

tablerow