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

【问题标题】：Add border-radius and padding to a single Table Row将边框半径和填充添加到单个表格行
【发布时间】：2015-10-30 00:22:25
【问题描述】：

我似乎无法在表格行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 并对其进行样式设置以实现我所追求的。但它没有用。

【问题讨论】：

标签： html css html-table tablerow

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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;
                        }

【讨论】：