我用div构建的这个表做错了什么? 为什么标题行和单元格行的宽度不同?
另一个问题是,在调整浏览器窗口标题时,一个单元格会失去其合理性。我希望标题和单元格具有相同的移动。 如果您调整浏览器窗口的大小,您将看到不同的边界。
这是我的代码
html, body {
width: 100%;
height: 95vh;
overflow: hidden;
background-color: rgba(31, 30, 30, 1);
}
.records {
width: 99%;
overflow-x: hidden;
overflow-y: auto;
}
.header-cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #3a3a3a;
color: #fff;
white-space: nowrap;
}
.cell {
display: inline-block;
width: 9%;
height: 20px;
margin-top: 2px;
margin-left: -4px;
border: 1px solid #fff;
background: #ccc;
color: #494949;
white-space: nowrap;
}
.header {
position: fixed;
width: 100%;
}
.row1 {
padding-top: 4px;
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}
/* scrollbars */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
border-radius: 10px;
background: rgba(204, 51, 0, .9);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, .4);
}

<div class="records">
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
<a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a>
</div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell">
<a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a>
</div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
这是制作餐桌的一种非常规的方式。 HTML具有<table>
元素,其中表具有<tr>
(表行)元素和<td>
(表格单元格)元素。布局如下所示:
<table class="tabName">
<tr class="header">
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
</table>
这将创建2行,每行包含4个元素,不包括标题。使用第一个表行的类名,可以在标题上设置特殊的CSS规范,为非标题设置其他规则。如果您只想要标题的CSS规则,请使用:
.header td{
/*header styles*/
}
如果要为不属于标题的单元格设置样式,请使用此CSS规则:
td:not(.header td){
/*non-header cell styles*/
}
为了将来参考,请记住div只用于&#34; package&#34;当一组元素共享一组共同的规则时,它们在一起。因此,避免为多个元素使用相同的类名重写相同的规则,或者在div中对它们进行分组。例如,如果您同时使用“确定”和“取消”按钮,则会将它们放在div中,因为除了按钮颜色之外,它们将使用完全相同的CSS规则。
答案 1 :(得分:0)
试试这个
#import "LowerView.h"
@interface LowerView()
@property UIView* upView;
@property UIView* lowView;
@end
@implementation LowerView
-(id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
_upView = [[UIView alloc] init];
_upView.backgroundColor = [UIColor greenColor];
[self addSubview:_upView];
_lowView = [[UIView alloc] init];
_lowView.backgroundColor = [UIColor yellowColor];
[self addSubview:_lowView];
return self;
}
-(void)layoutSubviews{
float padding = 5;
float viewWidth = self.frame.size.width - 2*padding;
_upView.frame = CGRectMake(padding, padding, viewWidth, 50);
float lowerLocY = _upView.frame.origin.y + _upView.frame.size.height + padding;
float lowViewHeight = self.frame.size.height-3*padding-_upView.frame.size.height;
_lowView.frame = CGRectMake(padding, lowerLocY, viewWidth, lowViewHeight);
}
@end
.records {
display: table;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
}
.btlrow {
display: table-row;
}
.cell {
background: #cccccc none repeat scroll 0 0;
border: 1px solid #fff;
color: #494949;
display: table-cell;
height: 20px;
margin-top: 2px;
white-space: nowrap;
}
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
/* scrollbars */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px; background: rgba(204,51,0,0.9); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
答案 2 :(得分:0)
我更新了你的html和样式,条目行的宽度和浮点数:左;用来代替display:inline-block;
<强> HTML 强>
.clear
<强>风格强>
.clear
参考更新小提琴: https://jsfiddle.net/5Ldv5m1a/3/
答案 3 :(得分:0)
您的代码需要对CSS文件进行少量更改,并且HTML文件中的CSS更改很少。以下是更改。
HTML:
{
"time": [
[
"2016-07-26 09:46:37.245"
]
],
"data": [
[
"+0200 abc-lb1 WF WARN UNRECOGNIZED_COOKIE 188.200.126.234 50011 10.50.51.25 443 global GLOBAL LOG NONE [Cookie\\="_ga" Service-created\\="769 days back" Reason\\="No valid encrypted pair"] GET example.com/search.action?searchText\\=EH-5H&token\\=--0----EH-5H-- TLSv1.2 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36" 188.200.126.234 50011 "-""
]
],
"url": [
[
"https://example.com/my-account/login"
]
]
}
CSS:
<div class="records" >
<div class="header">
<div class="header-cell">#</div>
<div class="header-cell">Movie</div>
<div class="header-cell">Distributor</div>
<div class="header-cell">Country</div>
<div class="header-cell">Language</div>
<div class="header-cell">Name</div>
<div class="header-cell">Role</div>
<div class="header-cell">Born</div>
<div class="header-cell">Star Sign</div>
<div class="header-cell">Episodes</div>
</div>
<div style="padding-top:19px;display: table-row;">
<div class="cell">145</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell"><a href="http://www.imdb.com/name/nm0227759/?ref_=tt_cl_t1">Peter Dinklage</a></div>
<div class="cell">Tyrion Lannister</div>
<div class="cell">June 11, 1969</div>
<div class="cell">Gemini</div>
<div class="cell">2-3-4-6-11</div>
</div>
<div style="padding-top:1px;display: table-row;">
<div class="cell">146</div>
<div class="cell">Game Of Thrones</div>
<div class="cell">HBO</div>
<div class="cell">USA</div>
<div class="cell">English</div>
<div class="cell"><a href="http://www.imdb.com/name/nm3229685/?ref_=tt_cl_t4">Kit Harington</a></div>
<div class="cell">Jon Snow</div>
<div class="cell">December 26, 1986</div>
<div class="cell">Capricorn</div>
<div class="cell">1-2-3-6-9</div>
</div>
</div>