我在做div的表中做错了什么

时间：2016-07-27 07:07:59

标签： html css

我用div构建的这个表做错了什么？ 为什么标题行和单元格行的宽度不同？

另一个问题是，在调整浏览器窗口标题时，一个单元格会失去其合理性。我希望标题和单元格具有相同的移动。 如果您调整浏览器窗口的大小，您将看到不同的边界。

这是我的代码

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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;
＆＃13;
＆＃13;

4 个答案:

答案 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>
相关问题
最新问题