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);
        }

我做错了吗？这甚至可能吗？

我尝试在div内添加tr并设计样式，以实现我之后的目标。但它没有用。

Answer 1

确保您的表格边框已折叠：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

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

继承人的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;
                        }

将border-radius和padding添加到单个表行

3 个答案: