Question

[HTML]

  <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">

            <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
            Remove this if you use the .htaccess -->
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

            <title>table</title>
            <meta name="description" content="">
            <meta name="author" content="Hyunjae.Park">
            <link rel="stylesheet" href="tablestyle.css" />
            <meta name="viewport" content="width=device-width; initial-scale=1.0">

            <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
            <link rel="shortcut icon" href="/favicon.ico">
            <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        </head>

        <body>
            <table id="roomlist_table">
                <thead>
                    <tr>
                        <th>No</th><th>Users</th><th>Organizers</th><th>Time</th><th>Explanation</th><th>Adjustment</th><th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row">
                        <th>1</th>
                        <th>1/12</th>
                        <th>Test, Man</th>
                        <th>17:00~18:00</th>
                        <th>Test Explanation</th>
                        <th><button>Modify</button><button>Network</button><button>Enter</button></th>
                        <th><a href="#">delete</a></th>
                    </tr>
<tr class="row">
                        <th>1</th>
                        <th>1/12</th>
                        <th>Test, Man</th>
                        <th>17:00~18:00</th>
                        <th>Test Explanation</th>
                        <th><button>Modify</button><button>Network</button><button>Enter</button></th>
                        <th><a href="#">delete</a></th>
                    </tr>
<tr class="row">
                        <th>1</th>
                        <th>1/12</th>
                        <th>Yourself</th>
                        <th>17:00~18:00</th>
                        <th>Test Explanation</th>
                        <th><button>Modify</button><button>Network</button><button>Enter</button></th>
                        <th><a href="#">delete</a></th>
                    </tr>
                </tbody>
            </table>


            <!-- <table>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Roomtype</th>
                        <th>Organizers</th>
                        <th>Time</th>
                        <th>Explanation</th>
                        <th></th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <th>Seminar</th>
                        <th>Test, Man</th>
                        <th>17:00~18:00</th>
                        <th>Test Explanation</th>
                        <th><button>Modify</button><button>Delete</button><button>Enter</button></th>
                    </tr>
                    <tr>
                        <th>1</th>
                        <th>1/12</th>
                        <th>Test, Man</th>
                        <th>17:00~18:00</th>
                        <th>Test Explanation</th>
                        <th><button>Modify</button><button>Network</button><button>Enter</button></th>
                        <th><a href="#">delete</a></th>
                    </tr>
                </tbody>
            </table> -->
        </body>
    </html>

[CSS]

#roomlist_table{
    font-size: 11pt;
    border-top: 1px solid #353b55;
    border-spacing: 0px;
    width: 730px;
    border-left: 1px solid #bcc0c9;
    border-right: 1px solid #bcc0c9;
    border-bottom: 1px solid #bcc0c9;
}
#roomlist_table thead{
    background-color: #f5f5f5;
}
#roomlist_table thead tr{
    height: 30px;
}
#roomlist_table tbody tr{
    height: 50px;
}
.row{
    border: 1px solid #bcc0c9;
}

演示 http://jsfiddle.net/P2GZX/15/

有趣的是，如果我在我的本地运行它，它不会在chrome中显示任何行，但在jsfiddle演示中，它显示一行。

[编辑]

JSFiddle IS不显示整行，而不仅仅是chrome。有什么好主意吗？

Answer 1

首先，你在tr类声明中错过了一个相等的符号：

第2和第3 tr行是<tr class "row">，正确的行是<tr class="row">。也许Chrome不会容忍这样的错误。

其次，我不知道为什么tr中的边框样式不起作用，但您可以使用此技巧获得相同效果：样式.row>th具有border-top如下：

#roomlist_table {
    font-size: 11pt;
    border-top: 1px solid #353b55;
    border-spacing: 0px;
    width: 730px;
    border-left: 1px solid #bcc0c9;
    border-right: 1px solid #bcc0c9;
    border-bottom: 1px solid #bcc0c9;
}
#roomlist_table thead {
    background-color: #f5f5f5;
}
#roomlist_table thead tr {
    height: 30px;
}
#roomlist_table tbody tr {
    height: 50px;
}
.row>th {
    border-top: 1px solid #bcc0c9;
}

请参阅演示：http://jsfiddle.net/P2GZX/15/

Answer 2

编辑你的css“row”

.row {
  outline: thin solid #bcc0c9;
}

如果这没有用，请告诉我。

html行不是绘图线

2 个答案: