2013-05-03 82 views
-1

我有两个表显示数据库中的数据。设置相同的宽度2表

现在我为头条和第二个表设置数据表。

我这样设置

<table class="t_status"> 
    <td>No</td> 
    <td>Name</td> 
    <td>Address</td> 
</table> 

在表#2

<table class="t_status"> 
    <td>1</td> 
    <td>Michael</td> 
    <td>California</td> 
<tr> 
    <td>2</td> 
    <td>Greg</td> 
    <td>LA</td> 

现在面临的问题时数据显示,表1和表2设置不同的宽度。

这是CSS

table 
{ 
empty-cells: show; 
border-collapse: collapse; 
width: 100%; 
} 

.t_status 
{ 
border-collapse: collapse; 
background: #fff; 
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
width: 100%;  
margin-top: -1px; 
} 

.t_status td, th 
{ 
border-top: 1px solid #c0c0c0; 
border-bottom: 1px solid #c0c0c0; 
border-left: 1px solid #c0c0c0; 
border-right: 1px solid #c0c0c0; 
padding: 10px; 
font-size: 40pt; 
font-weight: bold; 
} 

.t_status td 
{ 
color: #fff; 
background-color: #000; 
} 

.t_status th 
{ 
font-size: 40pt; 
color: #fff; 
} 
+2

为什么你使用两个表?使用'th'作为标题 – Morpheus 2013-05-03 08:56:43

+0

@Morpheus或者处于最佳状态 - 'thead' – Joshua 2013-05-03 08:57:54

+0

我使用2个表格的原因,之后会使用字幕,所以当数据在选取框时,表格头部将固定保持在顶部 – 2013-05-03 08:59:04

回答

0

尝试把他们像这样:

<table class="t_status"> 
<tr> 
    <td>No</td> 
    <td>Name</td> 
    <td>Address</td> 
</tr> 
</table> 

<table class="t_status"> 
<tr> 
    <td>1</td> 
    <td>Michael</td> 
    <td>California</td> 
</tr> 
<tr> 
    <td>2</td> 
    <td>Greg</td> 
    <td>LA</td> 
</tr> 
</table> 
0

如果是正确使用的是两个表的滚动头的效果和数据,所以你会得到所有数据的表头。

达到这样的效果,你可以尝试使用jQuery表的JTable sample code

0

你的HTML语法不正确。使用tr标签: -

<table class="t_status"> 
<tr> 
    <td>No</td> 
    <td>Name</td> 
    <td>Address</td> 
</tr> 
</table> 
0

您应该将所有信息放在一张表中,因此您可以确保行具有相同的宽度。

<table class="t_status"> 
    <thead> 
     <tr> 
      <th>No</th> 
      <th>Name</th> 
      <th>Address</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Michael</td> 
      <td>California</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Greg</td> 
      <td>LA</td> 
     </tr> 
    </tbody> 
</table> 

<thead></thead><tbody></tbody>没有必要。

0

看起来你已经忘记了<tr>标签。顺便说一句,如果你想保留您的标记(正确与否,而是两个不同的表),您可以用nth selectors尝试给一个固定的宽度,以每个单元:

.t_status td:nth-child(1) { 
    width:2em; 
} 
.t_status td:nth-child(2) { 
    width:5em; 
} 
.t_status td:nth-child(3) { 
    width:5em; 
} 

Here's a working example