Нижняя граница ячейки

@vars-cat · Регистрация: 21.12.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте. Мне нужно убрать рамки с некоторых сторон ячеек и получить результат как на картинке.

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table class="myTable" border="1" bordercolor="black" rules="groups">
        <colgroup>
        <colgroup>
        <colgroup>
        <thead>
            <tr align="left">
                <th colspan="2">Name</th>
                <th></th>
            </tr>
            <tr align="left" style="border: 1px solid; text-decoration: underline; color: blue; border-color: black">
                <th>Fore</th>
                <th>Surname</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Neil</td>
                <td>Crosby</td>
                <td>$1.96</td>
            </tr>
            <tr>
                <td>Becca</td>
                <td>Courtly</td>
                <td>$23.95</td>
            </tr>
            <tr>
                <td>David</td>
                <td>Fraidman-Jones</td>
                <td>$14.00</td>
            </tr>
            <tr>
                <td>Annabel</td>
                <td>Tyler</td>
                <td>$104.00</td>
            </tr>
            <tr>
                <td>Carl</td>
                <td>Conway</td>
                <td>$17.00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2"></th>
                <th>$160.91</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

CSS

.myTable thead th:empty, tfoot th:empty
{
    background: transparent;
    background-color: #ffffff;
}
 
.myTable
{
    width: 200px;
    height: 250px;
}
 
thead, tfoot
{
    background-color: #B0C4DE;
}
 
tbody tr:nth-child(2n)
{
    background: #B0E0E6;
}

@vars-cat · 18.04.2016, 16:02 **[ТС]**

Проблема решена.

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table class="myTable" border="1" bordercolor="black" rules="groups">
        <colgroup>
        <colgroup>
        <colgroup>
        <thead style="border-top: 1px solid white; border-right: 1px solid white">
            <tr align="left">
                <th colspan="2" style="border-top: 1px solid black">Name</th>
                <th></th>
            </tr>
            <tr align="left" style="border: 1px solid; text-decoration: underline; color: blue; border-color: black">
                <th>Fore</th>
                <th>Surname</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Neil</td>
                <td>Crosby</td>
                <td>$1.96</td>
            </tr>
            <tr>
                <td>Becca</td>
                <td>Courtly</td>
                <td>$23.95</td>
            </tr>
            <tr>
                <td>David</td>
                <td>Fraidman-Jones</td>
                <td>$14.00</td>
            </tr>
            <tr>
                <td>Annabel</td>
                <td>Tyler</td>
                <td>$104.00</td>
            </tr>
            <tr>
                <td>Carl</td>
                <td>Conway</td>
                <td>$17.00</td>
            </tr>
        </tbody>
        <tfoot style="border-bottom: 1px solid white; border-left: 1px solid white">
            <tr>
                <th colspan="2"></th>
                <th style="border-bottom: 1px solid black">$160.91</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

CSS

.myTable thead th:empty, tfoot th:empty
{
    background: transparent;
    background-color: #ffffff;
}
 
.myTable
{
    width: 200px;
    height: 250px;
}
 
thead, tfoot
{
    background-color: #AAAAFF;
}
 
tbody tr:nth-child(2n)
{
    background: #DDDDFF;
}

	18.04.2016, 16:02